jQuery.on(): cómo conectar co­n­tro­la­do­res de eventos

El método jQuery.on() si­m­pli­fi­ca la gestión de eventos y se utiliza am­plia­me­n­te en el de­sa­rro­llo de apli­ca­cio­nes web in­ter­ac­ti­vas. Te pre­se­n­ta­mos la sintaxis y ejemplos prácticos de apli­ca­ción de esta función tan im­po­r­ta­n­te.

¿Qué es el método jQuery.on()?

jQuery.on() permite vincular co­n­tro­la­do­res de eventos a elementos es­pe­cí­fi­cos en el de­sa­rro­llo web. Puedes utilizar jQuery.on() para responder a las in­ter­ac­cio­nes del usuario, como eventos de clics, entradas de teclado, mo­vi­mie­n­tos del ratón o entradas de fo­r­mu­la­rios, y llamar a funciones como co­n­se­cue­n­cia. Además, facilita la de­le­ga­ción de eventos, lo que te permite vincular co­n­tro­la­do­res de eventos a elementos que se agreguen o eliminen di­ná­mi­ca­me­n­te durante la ejecución. Esto resulta útil, por ejemplo, para añadir una clase con jQuery.addClass(), localizar elementos con jQuery.find() y realizar ite­ra­cio­nes con la función de bucle jQuery.each() en el bloque de funciones. Los métodos para el pro­ce­sa­mie­n­to de eventos se pueden integrar fá­ci­l­me­n­te con jQuery en WordPress.

Sintaxis y pa­rá­me­tros del método jQuery.on()

La sintaxis de jQuery.on() es la siguiente:

$(selector).on(event, childSelector, data, function, map)

• Event: el nombre del evento al que debe responder el co­n­tro­la­dor de eventos, por ejemplo, “click”, “keydown”, “submit”, etc.
• chi­l­d­Se­le­c­tor: es un selector CSS opcional que es­pe­ci­fi­ca qué elementos hijo deben activar el evento
• data: datos adi­cio­na­les op­cio­na­les que se pasan al co­n­tro­la­dor del evento
• function: la función que se debe ejecutar cuando se activa el evento
• map: permite vincular varios eventos y sus co­n­tro­la­do­res en una sola llamada mediante un mapeo de objetos

Para obtener más in­fo­r­ma­ción sobre funciones y su sintaxis, consulta el tutorial de jQuery di­s­po­ni­ble en nuestra guía.

Ejemplo de uso de jQuery.on()

Puedes utilizar el método jQuery.on() para vincular eventos y ejecutar un de­te­r­mi­na­do código cuando se produzcan dichos eventos. Aquí tienes un ejemplo de pro­ce­sa­mie­n­to de un evento clic:

$('#myButton').on('click', function() {
    console.log('¡Se ha pulsado el botón!');
});

En este ejemplo, el co­n­tro­la­dor de eventos para un clic está vinculado al elemento botón con el ID “myButton”. Cuando se hace clic en el botón, se ejecuta la función del co­n­tro­la­dor del evento y se muestra el mensaje “¡Se ha pulsado el botón!” en la consola. Puedes utilizar jQuery.on() para controlar otros eventos, como “mouseover”, “keydown” o “submit”, y definir funciones para cada uno de ellos.