En este post vas aprender cómo definir un escuchador de evento en desarrollo web, el cual llega desde fuera y permite que se pinte el evento sobre la interfaz.

¿Cómo definir un escuchador de evento?

Un escuchador de un evento o event listener es una herramienta que podemos agregar en nuestro programa de desarrollo web. Te ayuda a reaccionar, de cualquier forma, ante los sucesos que pasen en las clases que instanciamos, es decir, a los eventos de cada una de estas clases. El escuchador, por tanto, es el objeto que va a implementar la respuesta en la interfaz.

Ahora te preguntarás: ¿qué necesitamos saber para definir un escuchador de un evento? Además de entender los conceptos básicos de HTML, desarrollo web y web components, tendrás que tener definido tu evento y haberlo lanzado mucho antes de definir el escuchador que realizará su tarea desde fuera. Esta es una de las razones por las que vamos a situarlo dentro del texto o fichero de HTML.

Definir el evento y ejecutarlo

Antes de entender cómo definir un escuchador de evento en desarrollo web, deberás tener configurado el evento y, además, este debe haberse ejecutado. Vamos a recordar el proceso que realizamos en un artículo anterior sobre cómo emitir eventos para desarrollo web, donde empleamos el mismo ejercicio práctico de crear una app web que listaba to do o tareas por hacer.

Para crear un evento, tendremos que declararlo con un nombre específico; en este caso, le hemos puesto emitSendTextEvent. Allí tendremos que meter varios parámetros, que serán el nombre del evento y el parámetro de detail, es decir, el objeto o lugar en el que se van a añadir los elementos.

Después de hacer esto y de haber definido la constante para el valor del input, es el momento de lanzarlo con el método de dispatchEvent.

Si quieres revisar este proceso en profundidad, puedes echarle un vistazo al post que hemos mencionado antes. Además, a continuación te volvemos a traer el extracto de código que refleja lo que te acabamos de explicar:

emitSendTextEvent()  {
	

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

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

       this.dispatchEvent (event)
    }
}

Definir el escuchador de evento

Para aprender cómo definir un escuchador de evento en desarrollo web deberás tener el evento ya creado y lanzado. A su vez, tendrás que tener claros algunos elementos que vas a añadir dentro de este extracto de código, como el método de AddEventListener, el querySelector y el funcionamiento de la etiqueta de script en el lenguaje de marcado HTML.

Una vez hayas revisado todas las herramientas, podemos empezar definir un escuchador de evento en desarrollo web.

Primero, tenemos que adentrarnos en el script y generar el input al que se le debe agregar el método. Este será igual a la acción del método de querySelector de la clase o web component.

En el mismo lugar, tendrás que instanciar el escuchador del evento y agregarlo con el método de inputActionElement.addEventListener. Además, será necesario añadir un consolelog para que aparezca pintado sobre la pantalla de tu sitio web.

A continuación, vas a ver un extracto de código que representa lo que te acabamos de contar. De esta manera, podrás ver los métodos y etiquetas en acción y podrás reproducirlas en tus propios programas de código y desarrollo web.

<body>
   
   <input-action icon "🔎" placeholder = "cositas para hacer"></input-action>

   <script src" ./input-action.js"></script>
   <script>
     const inputActionElement = document.querySelector ("input-action");

     inputActionElement.addEventListener ('sendText', (event) => {
        console.log (event.detail);
     })
    </script>
</body>

Ya sabes cómo definir un escuchador de evento en desarrollo web gracias a este post, por lo que estás más cerca de convertirte en un experto en eventos para web components. Sin embargo, este tema es solo una pequeña de porción de todo lo que tiene que ofrecer el sector del desarrollo web. Si quieres seguir explorando el mundo del desarrollo web con nosotros, te invitamos a revisar el temario de nuestro Desarrollo Web Full Stack Bootcamp. ¡Anímate a apuntarte y cambia tu vida en pocos meses!