0

estoy intentado crear un evento con CustomEvent dentro de una clase en JavaScript.

class MyClass {

constructor(options) {
  this.el = options.element;
  this.like();
}
  
  like(){
    
const event = new CustomEvent('awesome', { detail: {
  current:n
}});

const container = document.querySelector(this.el);
container.dispatchEvent(event);

  }
  }

y lo quiero llamar asi (quisiera de esta manera) :

const myclass = new MyClass({
  element:'.my-class'
});

myclass.addEventListener('awesome', function (e) { /* ... */
  console.log(e.detail);
});

se agradece por la respuesta.

1 respuesta 1

0

El método addEventListener es propio de los elementos del DOM, por lo que una forma de conseguir lo que buscas sería:

  • En el método constructor establecemos this.el igual al DOMElement que se encuentre usando el selector indicado
  • En el método like disparamos el evento presonalizado sobre this.el
  • Posterior a la creación de la instancia myclass utilizamos el método addEventListener sobre myclass.el
  • Por último, llamamos al método like para disaprar el evento.

Ejemplo:

class MyClass {

  constructor(options) {
    this.el = document.querySelector(options.element);
  }

  like() {
    const event = new CustomEvent('awesome', {detail: {current: '?'}});
    this.el.dispatchEvent(event);
  }
}


const myclass = new MyClass({
  element: '.my-class'
});

myclass.el.addEventListener('awesome', e => console.log(e.detail));
myclass.like();
<div class="my-class"></div>

PD: Si quisieras hacer myclass.addEventListener, entonces deberías crear dicho método en la class MyClass

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.