jQuery.on(): cómo conectar controladores de eventos

El método jQuery.on() simplifica la gestión de eventos y se utiliza ampliamente en el desarrollo de aplicaciones web interactivas. Te presentamos la sintaxis y ejemplos prácticos de aplicación de esta función tan importante.

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

jQuery.on() permite vincular controladores de eventos a elementos específicos en el desarrollo web. Puedes utilizar jQuery.on() para responder a las interacciones del usuario, como eventos de clics, entradas de teclado, movimientos del ratón o entradas de formularios, y llamar a funciones como consecuencia. Además, facilita la delegación de eventos, lo que te permite vincular controladores de eventos a elementos que se agreguen o eliminen dinámicamente durante la ejecución. Esto resulta útil, por ejemplo, para añadir una clase con jQuery.addClass(), localizar elementos con jQuery.find() y realizar iteraciones con la función de bucle jQuery.each() en el bloque de funciones. Los métodos para el procesamiento de eventos se pueden integrar fácilmente con jQuery en WordPress.

Sintaxis y parámetros 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 controlador de eventos, por ejemplo, “click”, “keydown”, “submit”, etc.
• childSelector: es un selector CSS opcional que especifica qué elementos hijo deben activar el evento
• data: datos adicionales opcionales que se pasan al controlador del evento
• function: la función que se debe ejecutar cuando se activa el evento
• map: permite vincular varios eventos y sus controladores en una sola llamada mediante un mapeo de objetos

Para obtener más información sobre funciones y su sintaxis, consulta el tutorial de jQuery disponible en nuestra guía.

Ejemplo de uso de jQuery.on()

Puedes utilizar el método jQuery.on() para vincular eventos y ejecutar un determinado código cuando se produzcan dichos eventos. Aquí tienes un ejemplo de procesamiento de un evento clic:

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

En este ejemplo, el controlador 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 controlador 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.