El método addEventListener () - Código de ejemplo de escucha de eventos de JavaScript

El método addEventListener () de JavaScript le permite configurar funciones para ser llamadas cuando ocurre un evento específico, como cuando un usuario hace clic en un botón. Este tutorial le muestra cómo puede implementar addEventListener () en su código.

Comprensión de eventos y controladores de eventos

Los eventos son acciones que ocurren cuando el usuario o el navegador manipula una página. Desempeñan un papel importante ya que pueden hacer que los elementos de una página web cambien dinámicamente.

Por ejemplo, cuando el navegador termina de cargar un documento, loadocurre un evento. Si un usuario hace clic en un botón en una página, entonces clickha ocurrido un evento.

Muchos eventos pueden ocurrir una vez, varias veces o nunca. Es posible que tampoco sepa cuándo ocurrirá un evento, especialmente si lo genera el usuario.

En estos escenarios, necesita un controlador de eventos para detectar cuándo ocurre un evento. De esta manera, puede configurar el código para reaccionar a los eventos a medida que ocurren sobre la marcha.

JavaScript proporciona un controlador de eventos en forma de addEventListener()método. Este controlador se puede adjuntar a un elemento HTML específico para el que desea monitorear eventos, y el elemento puede tener más de un controlador adjunto.

Sintaxis de addEventListener ()

Esta es la sintaxis:

target.addEventListener(event, function, useCapture) 
  • target : el elemento HTML al que desea agregar su controlador de eventos. Este elemento existe como parte del Modelo de objetos de documento (DOM) y es posible que desee aprender cómo seleccionar un elemento DOM.
  • evento : una cadena que especifica el nombre del evento. Ya mencionamos loady clickeventos. Para los curiosos, aquí hay una lista completa de eventos DOM de HTML.
  • función : especifica la función que se ejecutará cuando se detecte el evento. Esta es la magia que puede permitir que sus páginas web cambien de forma dinámica.
  • useCapture : un valor booleano opcional (verdadero o falso) que especifica si el evento debe ejecutarse en la fase de captura o propagación. En el caso de elementos HTML anidados (como un imgdentro de a div) con controladores de eventos adjuntos, este valor determina qué evento se ejecuta primero. De forma predeterminada, se establece en falso, lo que significa que el controlador de eventos HTML más interno se ejecuta primero (fase de propagación).

Ejemplo de código addEventListener ()

Este es un ejemplo simple que hice y que te muestra addEventListener()en acción.

Cuando un usuario hace clic en el botón, se muestra un mensaje. Otro clic de botón oculta el mensaje. Aquí está el JavaScript relevante:

let button = document.querySelector('#button'); let msg = document.querySelector('#message'); button.addEventListener('click', ()=>{ msg.classList.toggle('reveal'); }) 

Siguiendo la sintaxis mostrada anteriormente para addEventListener():

  • objetivo : elemento HTML conid='button'
  • función : función anónima (flecha) que configura el código necesario para revelar / ocultar el mensaje
  • useCapture : dejado al valor predeterminado defalse

Mi función es capaz de revelar / ocultar el mensaje agregando / eliminando una clase CSS llamada "revelar" que cambia la visibilidad del elemento del mensaje.

Por supuesto, en su código, no dude en personalizar esta función. También puede reemplazar la función anónima con una función propia con nombre.

Pasar evento como parámetro

A veces, es posible que deseemos saber más información sobre el evento, como en qué elemento se hizo clic. En esta situación, necesitamos pasar un parámetro de evento a nuestra función.

Este ejemplo muestra cómo puede obtener la identificación del elemento:

button.addEventListener('click', (e)=>{ console.log(e.target.id) }) 

Aquí el parámetro de evento es una variable nombrada, epero se puede llamar fácilmente de cualquier otra forma, como "evento". Este parámetro es un objeto que contiene información diversa sobre el evento, como la identificación del objetivo.

No tienes que hacer nada especial y JavaScript automáticamente sabe qué hacer cuando pasas un parámetro de esta manera a tu función.

Eliminar controladores de eventos

Si por alguna razón ya no desea que se active un controlador de eventos, aquí le mostramos cómo eliminarlo:

target.removeEventListener(event, function, useCapture); 

Los parámetros son los mismos que addEventListener().

La práctica hace la perfección

La mejor manera de mejorar con los controladores de eventos es practicar con su propio código.

Aquí hay un proyecto de ejemplo que hice en el que usé controladores de eventos para cambiar el color, el tamaño y la velocidad de las burbujas que fluyen por el fondo de una página web (deberá hacer clic en el panel central para revelar los controles).

¡Diviértete y haz algo increíble!

Para obtener más conocimientos sobre desarrollo web para principiantes, visite mi blog en 1000 Mile World y síganme en Twitter.