Home > General > Eventos en jQuery, uso básico de on.

Eventos en jQuery, uso básico de on.

November 30th, 2012 Serabe Leave a comment Go to comments

En la primera entrega, vimos lo básico de los eventos de nuestro DOM. Ahora veremos cómo usar de forma básica jQuery para manejarlos.

Notas previas

Todo el código javascript mostrado en este artículo se supone dentro de la función jQuery tal que así:

El cuerpo del html es:

El método on

Antiguamente, jQuery usaba varios métodos para manejar los eventos (click, bind, live, delegate), pero actualmente se favorece el uso de un único método: on.

Lo básico

En el primer ejemplo, dibujamos tres cajas que, al hacer click sobre ellas, muestran un mensaje.

Seleccionamos los div correspondientes con $('.box') y llamamos al método on con dos parámetros. El primero, es el evento en el que estamos interesados; el segundo, la función a la que se llamará. jQuery pasará un objeto Event que no es más que una normalización de los objetos de cada navegador. Además, dentro del handler this se refiere al objeto en el se ha llamado al evento, en este caso, el div en el que se ha hecho click.

Ahora, supongamos que queremos darles un borde negro a las distintas cajas cuando pasamos el ratón por encima y quitárselo cuando el ratón sale de ellas. La forma obvia de hacerlo sería crear una clase CSS black-border con la regla correspondiente y añadírselo en el evento mouseenter y quitársela en el evento mouseout. El código en funcionamiento se puede ver en este fiddler.  Podemos acortar un poco el código pasando un objeto cuyas claves sean los eventos y los valores los handlers, como se observa en este otro fiddler.

Sin embargo, en vez de usar los métodos autodescriptivos addClass y removeClass, podemos usar el método toggleClass. Este método, pasado un nombre de clase, la añade si el elemento la tenía y la quita en caso contrario. Si además sabemos que como nombre de evento podemos pasar varios nombres separados por espacios el código (totalmente funcional) queda similar a esto:

Disparando eventos

Podemos hacer uso del método trigger para lanzar eventos. Aunque a primera vista pueda parecer poco útil, unido al hecho de podemos añadir handlers a eventos propios trigger se convierte en una importante herramienta a tener en cuenta.

Este método no tiene mucho más secreto, salvo un par de formas más de llamarlo, perfectamente documentadas en la documentación oficial. Probadlo en este fiddler.

Evitando la propagación

Ya comentamos qué era la propagación y que se podía evitar pero, dado que difería un poco jQuery respecto al comportamiento habitual en ciertos casos, no entramos en detalles. Ahora veremos qué cuatro métodos nos proporciona jQuery para lidiar con la propagación.

event.preventDefault

Al igual que en el caso general, si llamamos a este método, la acción por defecto del evento no se llevará a cabo. Además, podemos usar el método isDefaultPrevented para saber si se ha llamado o no preventDefault en el evento.

event.stopPropagation

Este método evita que el evento continúe propagándose y los handlers de los elementos padres sean llamados. Sin embargo, el resto de handlers para dicho evento en el elemento actual sí serán llamados. El método que nos permitirá saber si se ha llamado a stopPropagation es isPropagationStopped.

event.stopImmediatePropagation

En el caso de stopPropagtion, vimos que no evitaba que el resto de handlers del propio elemento sean llamados. Si queremos evitarlo, deberemos llamar a stopImmediatePropagation. Éste llama por sí solo a stopPropagation, así que también evita que el evento se propague a los nodos padre.

Por si os lo preguntáis, isImmediatePropagationStopped (menudo nombrecito) nos dirá si ya se ha llamado o no a este método. La utilidad de este método se me escapa.

return false

Y es aquí cuando vienen las diferencias. En jQuery, devolver false desde un handler equivale a llamar event.preventDefault() y event.stopPropagation(). Esto es diferente de lo que ocurre normalmente si no usamos jQuery, ya que sólo equivaldría a event.preventDefault().

Personalmente, prefiero llamar a cada uno de los métodos porque dejo claras mis intenciones (y no me veo obligado a parar la ejecución del handler).

¡Pero esto qué es!

Supongamos que en nuestro documento html sólo tenemos un div#container. Supongamos que ejecutamos el siguiente código:

Podremos comprobar que no funciona. Esto se debe a que los elementos no existen cuando llamamos al método on. Veremos cómo solucionar esto en la segunda parte.

article clipper Eventos en jQuery, uso básico de on.
 
Categories: General Tags: , ,