"El diseño es el embajador silencioso de tu marca"
- Paul Brand

Método .on()

Todos aquellos que uséis Jquery en algún momento os habréis encontrado en una situación en la que para hacer lo mismo se presentan varias maneras, todas pueden ser correctas, pero siempre habrá una que sea más eficiente y de menos problemas.

Si hablamos de Handlers o «Manejadores de Eventos» (funciones que responden a cierto evento, por ejemplo que hagamos click con el ratón) desde la versión 1.7 la mejor forma es el método .on()

Sustituye a Bind, Live y Delegate

Este método sustituye a bind(), live() y delegate(), esto es una gran ventaja porque tantos métodos distintos que se comportan de formas diferentes causa confusión a la hora de programar, esto se elimina si solo tienes un método que lo hace todo, veamos porque existían y en qué se diferencian.

El método bind() se usaba así.

En este ejemplo se dispara cuando hacemos click sobre cualquier botón, el problema que tiene bind es que se aplica solo sobre aquellos elementos del DOM que ya están cargados cuando la función se ejecuta.

Para solucionar esto apareció primero live() y como daba muchos problemas después delegate(), que nos permitía asignar un evento a un contexto.

Se usan así.

Como vemos la diferencia está en que el delegate se aplica a los botones que estén dentro de un div con clase «contenedor«, y se aplica independientemente de cuando carguemos los botones, a diferencia de bind() que solo se aplicaba a los que estaban en el DOM en el momento de ejecutarse.

Sin embargo todos ellos llaman por debajo al evento .on(), ya vimos que de estos 3 métodos el más interesante es delegate() porque actúa sobre los elementos de forma dinámica (no importa que se carguen antes o después de llamar a la función) y es el que menos problemas da, veamos la sintaxis de .on() para ver como haríamos lo mismo.

En ambos casos nos muestra por consola un mensaje al hacer click en cualquier elemento que tenga la clase «item» dentro del div con el id «myContainer«, la diferencia está en el orden entre el evento (click) y el elemento (.item)

Como vemos no cambia tanto, tengamos presente que la sintaxis de .on() es la siguiente en la última versión de Jquery (1.11.2)

Para ver la secuencia que sigue .on() pensemos, una acción de un usuario sobre un elemento es un evento, al ocurrir este evento se ejecuta una función.

Types son los eventos que disparan la función. La novedad es que podemos asociar varios separándolos con espacios. Por ejemplo: ‘mouseenter mouseleave’.

Selector especifica los descendientes de los elementos seleccionados que dispararán el evento. Es opcional.

Data indica cualquier tipo de datos que necesitemos pasar a la función cuando se dispara el evento. Es opcional.

Fn es la función donde definimos las acciones a realizar cuando ese evento ocurra.

Volviendo al código que puse arriba.

Podemos observar que estamos definiendo que para los elementos «.item» que desciendan de «#myContainer», cuando el usuario haga click sobre ellos se ejecutará la función «function(event){ … }»

Aquí hemos definido types, selector y fn, creo que queda bastante claro cómo se usa.

Los Alias

.on() es llamado por los métodos que se disparaban por un evento, estos serían blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error contextmenu.

Es decir, que aunque podemos seguir usando estos, solo son alias para que sea más rápido escribir el .on(), por lo que a nivel de rendimiento aunque sea por muy poco siempre es mejor llamar a .on() directamente, que al alias y este a su vez a .on()

Aunque no sepamos para que sirven todos estos métodos, algo está claro, que si sabemos usar bien el .on() podemos hacer lo mismo y además más rápido, mira el siguiente ejemplo para el cual usamos el metodo keydown().

En la página de Jquery hablando de el vemos esto

keydown

Aquí vemos clara la referencia al método on, pues dice que en la primera y segunda variación es solo un «shortcut», un alias, un acceso directo al método .on(«keydown», handler), entendiendo por handler la función que ejecuta, por lo que los siguiente códigos son iguales.

 

El método .off()

Si el método .on() asocia una función a cierto evento que ocurre en un elemento específico, el elemento .off() lo desasocia.

Como vimos al principio del articulo el método on sustituye a bind, live y delegate, pues off sustituye unbind(), die() y undelegate() con el mismo propósito, aunar en un mismo método lo que antes hacían todos estos otros.

Si teníamos una función que hacía algo cuando se disparaba el evento «click» sobre cualquier enlace (etiqueta ‘a’) del contenedor con id «contenedor1», con esta sentencia lo eliminamos.

 


 

En vista de la potencia del método .on(), del que además descienden como vemos muchos otros, y de lo fácil que es utilizarlo os animo a que os familiaricéis con él en vuestros proyectos, usándolo siempre nuestro código será más homogéneo y eficiente.

 

The following two tabs change content below.
Especialista en diseño web responsive, programador html5, css3, jquery, php y java.

Latest posts by Óscar Lijó (see all)