Bind(). Creando eventos con Jquery

Hace algunas semanas me comentaron sobre el equivalente a button_to_remote_action en la beta 2 de kumbiaPHP y como se podría agregar un evento a un botón usando Form::button. En lo particular no me había percatado de la falta de button_to_remote_action ya que los eventos de los componentes los programo mediante backbone o Jquery (bind()).

Ventajas de separar el código de los eventos (código JS) del código HTML

  • Nuestro código HTML es mucho mas limpio y fácil de leer ya que evitamos batir JS con HTML
  • Toda nuestra lógica de eventos se encuentra concentrada en un solo lugar.
  • Es mucho mas fácil mantener el código.

Ejemplo.

A continuación mostrare un ejemplo aplicando dos eventos a un botón. Dichos ventos seran click y doble click

Nuestro código HTML

<button id="boton_enviar">Botón enviar</button>

 Nuestro código JS

$('#boton_enviar').bind({
  click: function() {
    alert('has dado click en el boton enviar');
 },
  <code>dblclick</code>: function() {
    alert('Hey me has dado doble click');
  }
});

Como podemos observar nuestro código HTML es limpio y a simple vista no encontramos eventos relacionados al mismo. en cuando al código JS todos los eventos se encuentran en un solo lugar, por lo que si queremos realizar una modificación ya no tendremos que mover HTML (claro dependiendo de la modificación que se requiera).

 

Extra!

Múltiples eventos

Ente ejemplo se crear un múltiple evento para sabes cuando el mouse a entrado/salido del área del botón.

$('#boton_enviar').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});

 

Event Handlers

Es posible accesar a las propiedades del componente al cual le estamos aplicando los eventos. en este caso nos devolverá el texto del botón.

$('#boton_enviar').bind('click', function() {
  alert($(this).text());
});

Como pueden apreciar con esto tenemos muchas más posibilidades y ventajas a la hora de programar los eventos.

Para saber más da click aqui

Leave a Reply

Your email address will not be published. Required fields are marked *