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

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

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

<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.

$('.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:

$('.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:

$('.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()

Autor
Escrito por Jose Aguilar - Experto programador Prestashop y Wordpress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (2 votos, promedio: 5,00 de 5)
Cargando…
Comparte en las redes sociales

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre