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:
1 |
$(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:
1 |
$(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():
1 2 3 4 5 |
$(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:
1 |
<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:
1 2 3 4 5 |
$(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:
1 |
<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:
1 2 3 4 5 6 |
$(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.
Ejemplo de jQuery off() para la eliminación de todos eventos asignados
Vamos a ver cómo podemos eliminar los eventos asignados con este código:
1 |
$("#elementocontrolado").off(); |
Ejemplo de jQuery off() para la eliminación un determinado evento asignado
Vamos a ver cómo eliminar un determinado evento:
1 |
$("p").off("click",changeSize); |
Selectores de jQuery
Para la detección, control o selección de elementos con jQuery os recomiendo leer este post: