Categorías: jQuery

jQuery on() y off(): Asignar de eventos a elementos del DOM

Vamos a repasar las funciones de jQuery on() y off() para la asignación y eliminación de eventos a los diferentes elementos del DOM.

Desde la versión 1.7 de jQuery la función on() suple perfectamente a las similares funciones bind(), live() y delegate().

Lo mismo sucede con la función off(), suple a las funciones unbind(), die() and undelegate().

Sintaxis de jQuery on()

Vamos a ver la sintaxis de la función de jQuery extraída de su web oficial:

$(selector).on(evento, childSelector, parametros, funcion, mapeo)

Con on() podemos asignar eventos a los elementos del DOM. Os explico los parámetros de la función:

selector (obligatorio): Elemento del DOM al que queremos asignar un evento.
evento (obligatorio): Evento que queremos controlar en el selector.
childSelector (opcional): Selección del nodo hijo dentro del elemento. Este nodo hijo debe de estar dentro de nodo especificado en selector.
parametros (opcional): Parámetros a pasar a la función.
funcion(obligatorio): Función callback a ejecutar cuando se produzca el evento.
mapeo (opcional): Mapeos realizados para cada evento, a cada mapeo se le asigna una función, pudiendo ser esta función diferente a la de los demás mapeos.

Sintaxis de jQuery off()

Ahora toca ver la sintaxis de la función opuesta a on() extraída de su web oficial:

$(selector).off(evento, selector2, funcion, map)

Con off() eliminanos las asignaciones de eventos realizados previamente los elementos del DOM con la función on(). Os explico los parámetros de la función:

selector (obligatorio): Elemento del DOM al que queremos eleminar un evento asignado previamente.
evento (obligatorio): Evento que queremos eliminar en el selector.
selector2 (opcional): Selección del nodo hijo dentro del elemento. Este nodo hijo debe de estar dentro de nodo especificado en selector.
funcion(opcional): Función a ejecutar cuando al eliminar el evento.
mapeo (opcional): Mapeos realizados para cada evento, a cada mapeo se le asigna una función, pudiendo ser esta función diferente a la de los demás mapeos.

Ejemplo de jQuery on() para asignar un evento a un elemento del DOM

Ahora vamos a ver en este primer ejemplo en funcionamiento la función on():

$(document).ready(function(){
 $("#parrafo").on("click",function(){
  alert('Has hecho click en el párrafo');
 });
});

Os explico el código:

Detectamos el click en el párrafo con id = ‘parrafo’.
Sacamos un alert por pantalla co un mensaje.

El código HTML del párrafo es el siguiente:

<p id="parrafo">Haz click en cualquier palabra de este párrafo</p>

Ejemplo de jQuery on() para asignar varios eventos a un elemento del DOM

Ahora vamos a ver en este segundo ejemplo la asignación de varios eventos a un único elemento:

$(document).ready(function(){
 $("#elementocontrolado").on("dblclick change",function(){
  alert('Función on() activada.');
 });
});

Explico el código superior:

Detecto los eventos dblclick (doble click) y change (cambio de valor) en el elemento con id = ‘elementocontrolado’.
Saco un alert con un mensaje por pantalla.

El código HTML del input de tipo number es el siguiente:

<p>Introduce la edad: <input id="elementocontrolado" type="number"></p>

Ejemplo de jQuery on() para el mapeo de eventos a un elemento del DOM

Tercer ejemplo para ver en funcionamiento el mapeo de eventos:

$(document).ready(function(){
 $("#elementocontrolado").on({
  change:function(){alert('El input ha cambiado de valor');},
  click:function(){alert('Has hecho click en el input');}
 });
});

Os explico el ejemplo:

Mantengo controlado el elemento con id = ‘elementocontrolado’.
Con change (cambio de valor) detecto que el elemento ha variado de valor y saco un mensaje por pantalla
En segundo lugar detecto el click en el elemento y saco un mensaje por pantalla.

El código HTML del input es idéntico al del ejemplo anterior.