Las funciones de jQuery bind() y unbind() quedaron obsoletas en la versión 1.7 de jQuery. Estas funciones asignan y eliminan eventos en los elementos del DOM.
En este post vamos a ver su sintaxis y ejemplos para sustituirlas por las funciones on() y off() que son las validas a partir de la 1.7.
Este mismo caso ocurre con las funciones delegate() – undelegate() y live() – die().
Os recomiendo leer el post ‘jQuery on() y off(): Asignar de eventos a elementos del DOM‘ para ver el potencial de estas 2 funciones.
Sintaxis de jQuery bind()
Con bind() podemos asignar por defecto eventos a los diferentes elementos que tenemos en el DOM. De esta manera podemos detectar una acción en nuestra web y desencadenar una serie de funciones.
Vamos con las diferentes sintaxis que podemos usar extraídas de su web oficial:
|
1 2 |
//un evento $(selector).bind(evento,funcion) |
Esta primera sintaxis es la más común y sencilla, solo controlamos un evento y le asignamos una función, os los explico:
- selector (obligatorio): Elemento del DOM que queremos controlar.
- evento (obligatorio): Evento jQuery que queremos controlar cuando sucede en el elemento del DOM.
- funcion (obligatorio): Función a ejecutar cuando se produce el evento en el elemento del DOM.
|
1 2 |
//varios eventos $(selector).bind(evento1 evento2 evento3 ...,funcion) |
Con esta otra sintaxis podemos controlar varios eventos en un elemento y asignarle una función, los diferentes eventos se tienen que separar con un espacio. Os lo resumo:
- selector (obligatorio): Elemento del DOM que queremos controlar.
- evento1, evento2, evento3 (obligatorio): Eventos jQuery que queremos controlar cuando sucede en el elemento del DOM.
- funcion (obligatorio): Función a ejecutar cuando se produce uno de los eventos anteriores en el elemento del DOM.
|
1 2 |
//mapeo de eventos $(selector).bind(evento,funcion,mapeos) |
Esta última sintaxis es la más peculiar, se mapean varios eventos con diferentes funciones, todas ellas sobre el mismo elemento.
- selector (obligatorio): Elemento del DOM que queremos controlar.
- evento (obligatorio): Evento jQuery que queremos controlar cuando sucede en el elemento del DOM.
- funcion (obligatorio): Función a ejecutar cuando se produce el evento en el elemento del DOM.
- mapeos (opcional): Los mapeos a realizar.
Sintaxis de jquery unbind()
Con unbind() eliminamos las asignaciones previas de eventos en los elementos de DOM. Vamos a ver sus diferentes sintaxis extraídas de su web oficial.
|
1 |
$(selector).unbind() |
Con la sintaxis superior eliminamos todas las asignaciones de eventos que tenga un elemento.
- selector (obligatorio): Elemento del DOM al que queremos eliminar los eventos.
|
1 |
$(selector).unbind(evento) |
Con esta sintaxis podemos eliminar uno de los eventos asignados a un elemento.
- selector (obligatorio): Elemento del DOM al que queremos eliminar un evento.
- evento (obligatorio): Evento jQuery que queremos eliminar de un elemento.
|
1 |
$(selector).unbind(evento, funcion) |
Con esta tercera sintaxis además de eliminar un evento podemos asignarle una función:
- selector (obligatorio): Elemento del DOM al que queremos eliminar un evento.
- evento (obligatorio): Evento jQuery que queremos eliminar de un elemento.
- funcion (opcional): Función a ejecutar.
Ejemplo de jQuery bind() asignando un evento a un elemento del DOM y su migración a on()
En este primer ejemplo de jQuery bind() vamos a asignar un evento a un elemento del DOM y ver su equivalente con la función on().
|
1 2 3 4 5 6 7 8 |
$(document).ready(function(){ $("#boton").bind("click",function(){ alert('Has hecho click en el botón del ejemplo de jQuery bind()'); }); $("#boton2").on("click",function(){ alert('Has hecho click en el botón del ejemplo de jQuery on()'); }); }); |
Os explico el código superior:
- Asignamos el evento click a los elementos que tengan id = boton, este evento sacará un mensaje por pantalla.
- El mismo evento lo asignamos con la función on(), como se aprecia… es my sencillo migrar de una función a otra.
El código HTML de los botones es el siguiente:
|
1 2 |
<input type="button" name="boton" id="boton" value="Clíckame"> <input type="button" name="boton2" id="boton2" value="Clíckame"> |
Ejemplo de jQuery bind() para asignar varios eventos a un elemento del DOM y su migración a on()
Segundo ejemplo para asignar varios eventos a un mismo elemento y ejemplo equivalente con on().
|
1 2 3 4 5 6 7 8 |
$(document).ready(function(){ $("#boton").bind("click dblclick",function(){ alert('Has hecho click en el botón del ejemplo de jQuery bind()'); }); $("#boton2").on("click dblclick",function(){ alert('Has hecho click en el botón del ejemplo de jQuery on()'); }); }); |
Os explico el código superior, es casi idéntico que el primer ejemplo:
- Asignamos los eventos click y dblclick a los elementos que tengan id = boton, estos eventos sacarán un mensaje por pantalla.
- Con on() la sitaxis de la función es calcada…
El código HTML de los botones es el mismo del ejemplo anterior.
Ejemplo de jQuery bind() con mapeo de eventos para un elemento del DOM y su migración a on()
Tercer y último ejemplo para ver funcionando el mapeo de eventos sobre un elemento y ejemplo equivalente con jQuery on():
|
1 2 3 4 5 6 7 8 9 10 |
$(document).ready(function(){ $("#boton").bind({ click:function(){alert('Has hecho click en el botón del ejemplo bind()');}, mouseover:function(){alert('Has pasado el ratón por encima del botón del ejemplo bind()');} }); $("#boton2").on({ click:function(){alert('Has hecho click en el botón en el ejemplo de on()');}, mouseover:function(){alert('Has pasado el ratón por encima del botón en el ejemplo de on()');} }); }); |
Os explico el código superior:
- Vamos a asignar 2 eventos con 2 acciones diferetes a los elementos con id = boton.
- El primer evento será la detección de un click y sacará un mensaje por pantalla.
- El segundo evento detectará el posicionamiento del ratón encima (mouseover) del elemento y sacará otro ensaje por pantalla.
Si os fijáis, la función on() es casi similar a bind(), solo cambia el nombre de la función, sería sencilla una migración…
El código HTML de los botones es el mismo de los ejemplos anteriores.
Ejemplo de jQuery unbind() para eliminar los eventos asignados a elementos
Ya solo nos queda repasar la eliminación de los eventos asignados a eventos, tomamos como base de ejemplo el código del ejemplo 2:
|
1 2 3 4 5 |
$(document).ready(function(){ $("#boton").bind("click dblclick",function(){ alert('Has hecho click en el botón'); }); }); |
Su equivalente en off() sería así:
|
1 2 3 4 5 |
$(document).ready(function(){ $("#boton").off("click dblclick",function(){ alert('Has hecho click en el botón'); }); }); |
La eliminación de todos los eventos sería así:
|
1 2 3 |
$("#boton").unbind() //equivalente en off() $("#boton").off(); |
Y la eliminación de un solo evento, por ejemplo la del evento click sería así:
|
1 2 3 |
$("#boton").unbind("click") //equivalente off() $("#boton").off("click"); |
Selectores de jQuery
Para la detección, control o selección de elementos con jQuery os recomiendo leer este post: