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:

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:

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():

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:

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:

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:

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

Tercer ejemplo para ver en funcionamiento el mapeo de eventos:

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:

Ejemplo de jQuery off() para la eliminación un determinado evento asignado

Vamos a ver cómo eliminar un determinado evento:

Selectores de jQuery

Para la detección, control o selección de elementos con jQuery os recomiendo leer este post:

• jQuery selectors: Cómo seleccionar o controlar elementos del DOM