jQuery addEventListener

En la publicación de hoy, aprenderemos sobre la función addEventListener en jQuery.

AddEventListener en jQuery

JavaScript proporciona el método integrado addEventListener() de la interfaz EventTarget. Este método configura una función que se llamará cada vez que el evento especificado se envíe al destino.

jQuery proporciona un método equivalente llamado .on(). Similar al método addEventListener de JavaScript, el método .on adjunta una función de controlador de eventos a los elementos seleccionados para uno o más eventos.

Sintaxis:

.on(events[, selector][, data], handler)

1. Events es una cadena que representa uno o más tipos de eventos, separados por espacios y espacios de nombres opcionales, por ejemplo, Click o keydown.myPlugin.
2. El selector representa una cadena de selección/coincidencia para filtrar los descendientes de los elementos elegidos que desencadenan el evento. Si el selector no se pasa o es null, el evento se despacha cada vez que se alcanza el elemento seleccionado.
3. Los data se pasan al controlador en event.data cuando se genera un evento.
4. handler es una función que se ejecuta cuando se genera el evento. Si la función handler devuelve null, también se permite un valor false como atajo.

A los elementos actualmente seleccionados, el método .on() de jQuery adjunta controladores de eventos al objeto. El método .on() brinda toda la funcionalidad para adjuntar controladores de eventos.

Se puede utilizar cualquier nombre de evento para el argumento del evento. jQuery itera/recorre los tipos de eventos de JavaScript estándar del navegador e invoca la función handler cuando el navegador falla debido a las acciones del usuario, por ejemplo, .clic, que desencadena eventos.

La técnica .trigger() también puede hacer que los nombres de eventos del navegador estándar y los nombres de eventos personalizados invoquen controladores conectados. Los nombres de los eventos deben incorporar los mejores caracteres alfanuméricos, guiones bajos y dos puntos.

Entendámoslo con el siguiente ejemplo sencillo.

<button id="btn">Hello World!</button>

$('#btn').on('click', () => {console.log('Click event is fired.')})

En el fragmento de código anterior, hemos definido el botón. Una vez que el usuario hace clic en el botón, se envía el evento click y se invoca la función handler.

Esto es similar al método .click(), que activa internamente el método on('click').

Intente ejecutar el fragmento de código anterior en cualquier navegador que admita jQuery. Se muestra el siguiente resultado.

"Click event is fired."

Demo