Programación y ejemplos de PHP, jQuery, HTML5, WordPress, MySQL y htaccess


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:

comments powered by Disqus

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies