Capturar eventos con bind() y eliminarlos con unbind()

Name: Capturar eventos con bind() y eliminarlos con unbind()
Brand: Jose Aguilar
SKU: joseaguilarblog-6942
Availability: InStock
Rating: 5 (2 reviews)

jQuery es mi framework favorito para desarrollar páginas y aplicaciones Web que requieran de interacción con el usuario de forma dinámica y no requiera actualizar la página para mostrar otro contenido. Los eventos en jQuery son imprescindibles en este caso y saber capturarlos es clave para poder conseguir tu objetivo.

Existen muchos eventos para capturar acciones del usuario de las que hablaremos en un próximo tutorial de una forma más extendida. En este artículo quiero hacer hincapié en la posibilidad de usar el evento bind() para definir cualquier tipo de evento.

El método bind() se utiliza para definir eventos de forma genérica y de cualquier tipo. Dispones del método contrario unbind() que permite eliminar el controlador del evento.

Necesitarás incluir en la página al menos la librería jQuery para poder usar estos métodos. Para probar puedes añadir lo siguiente dentro de la etiqueta <head>:

Source code

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

En el ejemplo en funcionamiento vamos a tener 2 botones o enlaces que definimos dentro del <body> de la siguiente forma:

Source code

<a href="#" class="btn btn-primary boton1">Boton 1</a>
<a href="#" class="btn btn-secondary boton2">Boton 2</a>

Para el botón 1 hemos creado un controlador para el evento «click» del mismo que tan solo abrirá una alerta al ser ejecutado.

Source code

$('.boton1').bind('click', function(){
    alert('Has hecho click en el boton 1.');
    return false;
});

Para nuestro botón 1 estamos usando la función bind() para definir el evento click.

Al pulsar en el botón 2 queremos que el botón 1 pierda su manejador del evento o acción. Lo conseguimos con el siguiente código que captura el evento del botón 2:

Source code

$('.boton2').bind('click', function(){
    $('.boton1').unbind('click');
    alert('Has deshabilitado el boton 1. Prueba a hacer click ahora!');
    return false;
});

Capturar los eventos con bind() tiene más ventajas ya que podrías capturar varios eventos en el mismo controlador. Por ejemplo:

Source code

$('.boton3').bind('click, dbclick', function(){
   //Your code here
});

Para el controlador del evento del botón 3 deberás imaginar que en la página tendremos un enlace o botón que al hacer click o doble click, podríamos hacer alguna acción.

El ejemplo en funcionamiento es una tontería pero estas funciones se podrían emplear en multitud de situaciones e incluso podrían sacarte de un apuro.

Ver ejemplo en funcionamiento

Ver más información sobre bind()