¿Cómo emitir eventos de web components?

¿Sabes cómo emitir eventos de web components? ¿Quieres hacerlo a partir de un ejercicio práctico? Si no solo deseas aprender cómo emitir eventos de web components con un ejercicio práctico de emitSendTextEvent, sino también aprovechar los nuevos métodos y herramientas que te mostraremos, sigue leyendo este post.

Cómo emitir eventos de web components

Para aprender cómo emitir eventos de web components dentro de un programa de código, es necesario que tengas otros conocimientos ya aprendidos, como la definición de clase, de constructor y de métodos.
Si tu nivel es mucho más avanzado, vas a saber que para generar un web component necesitamos métodos y estados, como el de contactCallBack, así como clases y métodos ya utilizados en JavaScript.

En este caso, para responder a tu pregunta sobre cómo emitir eventos de web components, destacamos dos pasos en este proceso: el de emitir el evento y el de disparar el evento. Es por eso que, en el ejercicio práctico que te mostraremos a continuación, veremos métodos como emitSendTextEvent y dispatchEvents.

Así pues, te invitamos a seguir leyendo este ejercicio práctico sobre el emitSendTextEvent para obtener un evento una vez hacemos clic sobre otro elemento.

Ejercicio práctico: emitSendTextEvent

Antes de empezar a ejecutar y disparar un evento, debemos tener claros los atributos de una clase, así como tener la clase definida con su respectivo constructor u otros métodos necesarios.

Existe una posibilidad infinita de eventos, que pueden ejecutarse en cualquier momento del programa. Por ejemplo, podemos tirar un evento cada vez que se pulsa el botón, que es el ejercicio que vamos a trabajar a continuación.
Por eso, vamos a añadir lógica, donde tenemos que añadir un escuchador al evento clic que se produzca sobre el botón; cuando esto suceda, debemos emitir un evento.

Para realizar este proceso, primero vamos a hacer el botón y a guardarlo en una variable. Esto lo haremos dentro del estado de contactCallBack, que realizamos en un post anterior, donde definimos la clase input action.

Cuando ya lo tengamos, vamos a ejecutar el método de una clase que se llamará emitSendTextEvent y, después, vamos a disparar el evento.

connectedCallback()  {
          const template = templateElement.content.cloneNode (true);
          this.shadowRoot.appendChild (template);
          

         const buttonElement = this.shadowRoot.querySelector ('button');
         buttonElement.text.Content = this.icon;
         this.shadowRoot.querySelector ('input').placeholder = this.placeholder;

           buttonElement.addEvetListener ('click'), () => {
                   this.emitSendTextEvent()

}}

}

Para emitir eventos utilizamos la API del navegador, que se define como un customEvents. Esta clase nos ayudará a crear el evento en general. Además, utilizaremos dispatchEvents para disparar el evento que hemos creado.

Entonces, creamos el evento (primera línea), donde vamos a recibir el tipo y un objeto con diferentes opciones. El primer parámetro es el nombre del evento SendText y el segundo será el objeto en el que vamos a añadir varias cosas, como el valor que tiene nuestro input. Todos los datos que viajan en un evento deben estar dentro de la propiedad detail (donde puedes meter objetos y valores).

Como el web component se extiende desde la clase HTMLElements, podremos utilizar el método DispatchEvent. Este permite que, si alguien escucha ese evento, se entere de él.

Luego, vamos a definir el valor del input dentro del detail y ¡listo!

emitSendTextEvent()  {
	

const inputValue = this.shadowRoot.querySelector {'input'}.value
    if (inputValue){

       const event = new CustomEvent (´sendText', { detail: inputValue
       })

       this.dispatchEvent (event)
    }
}

¿Qué sigue ahora?

Ya que gracias a este post has aprendido cómo emitir eventos de web components y, además, has podido aprenderlo a partir de un ejercicio práctico, seguramente estarás interesado en conocer más acerca de otros ejercicios en los que podamos emitir eventos de web components. Por lo tanto, te queremos recomendar nuestra formación intensiva en Desarrollo Web Full Stack Bootcamp, con la que podrás cumplir tus sueños al convertirte en un desarrollador web. ¡Solicita más información ahora y cambia tu vida en pocos meses!