Eventos en jQuery, cómo usar on.

En la última entrega vimos que el siguiente código no funcionaba: El anuncio desencadenó un charla con Sergi manteniendo que debería escribir directamente sobre delegación de eventos, que es precisamente lo que vamos a tratar ahora.

Delegando eventos.

jQuery cuenta con muchos métodos para delegar a eventos (bind, delegate o live). Sin embargo, estos métodos están obsoletos desde jQuery 1.7 en favor de on. A pesar de eso, empezaré explicando live, pasaré a delegate y finalmente llegaré a on.

live

El problema del código original se hubiese solucionado fácilmente llamando a live en vez de a on, como se comprueba en el fiddler correspondiente. El código es idéntico, simplemente cambia on por live.

Lo que hace este método es disparar el evento en cualquier elemento que satisfaga el selector, valiéndose de la propagación.

Dado que live está obsoleto y que actualmente live usa on internamente, lo dejaremos aquí.

delegate

delegate es bastante similar a live, sólo cambia cómo llamarlo. La equivalencia de llamadas sería:

El fiddler para delegate simplemente busca el elemento #container y le añade los handlers a él con los selectores correspondientes.

Por cierto, a la hora de escribir este artículo, delegate, ya obsoleto, también delega en on.

on

Finalmente, on es el camino a seguir con jQuery, al fin y al cabo, como habéis podido comprobar, tanto live como delegate usan on internamente.

Usar on para delegar eventos es muy similar a usar delegate, salvando que los eventos y los selectores están en orden inverso. El fiddle lo muestra en funcionamiento y el código completo es el siguiente:

¿Qué es lo que está pasando realmente?

Delegar un evento no hace que jQuery lo añada a los elementos correspondientes en cuanto se creen, sino que se añaden al elemento seleccionado ya existente y, por lo tanto, la propagación se puede parar en cualquier elemento que esté por debajo de él. De ahí que tengamos que pensar dónde delegar el evento ya que podemos cancelarlo sin darnos cuenta.

Por otro lado, tal y como podemos leer en la documentación de on en la sección Event performance, no debemos complicar mucho los selectores dentro de la delegación. Si nos vemos usando selectores jerárquicos, seguramente podamos delegar el evento en un elemento más cercano.

Delegación a mano

Para simular la delegación anterior cuyo selector era una simple clase, podemos hacerla usando el siguiente código:

En él simplemente comprobamos que el elemento que ha lanzado el evento (evt.target en el código) contiene la clase box. Puede parecer poco código extra, pero sin duda son dos líneas que nos ahorramos a cambio de un selector (el cual puede ser más complicado).

Eventos en jQuery, uso básico de on.

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.

Aprendiendo jQuery con la web del Senado, I

Notas previas.

En primer lugar, agradecer a los desarrolladores que han trabajado duramente en funciones.js y en aquellos que no se han molestado en pasarlo por un minimizador de código.

Se recomienda leer antes el artículo de Javier Ramírez Los problemas del desarrollo web en España resumidos en senado.es.

El código está disponible en este gist.

Durante esta serie de artículos nos olvidaremos de que todas las funciones son declaradas en el ambiente global.

El problema del peso.

 

Antes de ponernos con jQuery, veamos un poco cómo está hecho el archivo. El archivo pesa unos 45KB (según me chiva ls -lh) y tiene unas 1313 líneas (esto, chivado por wc -l). Lo primero que intento es ver cómo está el código. Para ello, usamos alguna herramienta como jslint o jshint. En este último caso, si pegamos el código y pulsamos en Lint, nos devolverá una lista con 50 errores, añadiendo un último error indicando que ha escaneado el 23% del código y ha parado porque ha encontrado demasiados errores.

Una vez pasado por jsHint, decidi pasarlo por el compilador de Google closure, para minimizarlo un poco. Al fin y al cabo, un vistazo rápido permite ver la ingente cantidad de comentarios que hay en el archivo. Está bien que haya muchos comentarios, lo único que me preocupa es:

  1. Que los han puesto en producción (gracias, Rocío, por sustituir los días escritos a fuego).
  2. Que haya código comentado, también en producción.

De ahí que me preguntase cuánto se ahorraría minimizando de la forma más básica el código. Para ello, he usado el compilador de Google closure en dos versiones. En la primera, he usado los parámetros por defecto; y en la segunda, he pasado la opción --compilation_level ADVANCED_OPTIMIZATIONS. Echando mano otra vez de ls -lh, vemos que con los parámetros por defecto, el archivo resultante pesa 22KB, mientras que usando las optimizaciones avanzadas, el tamaño baja hasta 15KB. El archivo se queda, respectivamente, en un 50% y un 25% del tamaño original. Todo esto, realizado en cinco minutos, sin mayores ajustes de la herramienta. Cabe destacar que closure genera 1 y 6 warnings, todos ellos referidos al uso de la variable this, excepto uno, que se trata de un código que no se ejecutará nunca (ya veremos qué).

cargar_atr_destacados

La primera función que estudiaremos es, justamente la primera del archivo, la función cargar_atr_destacados. Dicha función se encuentra en este gist. Empecemos a tocar las pelotas aprender un poco.

En primer lugar, suelo preferir declarar las funciones de la forma var cargar_atr_destacados = function() {};, pero, mientras se entiendan las diferencias, me da un poco igual.

Dentro de la función, vemos que estamos ejecutando realmente el mismo código para $('#img_destacados1 img'), $('#img_destacados2 img'), $('#img_destacados3 img'), $('#img_destacados4 img') y $('#img_destacados5 img'). ¿Pesado de leer, ¿eh? ¡Pues imagínate lo pesado que debe ser de mantener! Por eso, antes de estudiar lo que hace, vamos a convertirlo, sin modificarlo mucho, en un bucle. El resultado es el siguiente

No está mucho mejor, pero al menos hemos reducido el número de líneas a casi un 25%.

Empecemos a ver qué hace el código. Todos esos signos de dólar ($) es como se llama comúnmente a la función de jQuery. Dicha función sirve para muchas (pero muchas de verdad, ¿eh?) cosas, entre ellas seleccionar elementos dado un selector de CSS. En este caso estamos seleccionando las etiquetas img dentro de los elementos cuyo id es img_destacados seguidos de un número del 1 al 5. Puesto que hay varias imágenes que cumplen dicha propiedad, el resultado es un array o vector de elementos.

Por otra parte, vemos muchas llamadas al método eq. Dicho método, como podemos observar en la documentación oficial, sirve para seleccionar un elemento específico dentro del array. Por ejemplo, eq(0) selecciona el primer elemento, eq(1) el segundo, etc. Ahora veamos porqué el uso del método anterior es innecesario.

¿Que lo geque y lo seque?

El método attr de jQuery se puede invocar de distintas formas. Si lo invocamos con un sólo argumento, como en la tercera línea del código anterior, tomará dicho parámetro como el nombre del atributo a devolver. Puesto que lo estamos llamando en una colección, podríamos pensar que nos devolverá un array de valores, pero en realidad nos devolverá sólo el valor del primer elemento. A esta forma de llamarlo lo llamaremos getter, porque nos devuelve un valor.

Por otra parte, podemos llamarlo como un setter. Para ello, le daremos dos valores, el nombre del atributo y el valor a tomar. Podríamos pensar que entonces sólo dará el valor pasado al primer objeto; al fin y al cabo, es el valor que nos devolvía. Sin embargo, dará el valor a todos los elementos de la colección. Hay una segunda y tercera forma de usarlo como setter, pero os podéis mirar la documentación para esos casos.

En general, todas las funciones de jQuery que puedan ser usadas como getter y como setter tienen el mismo comportamiento: si están siendo usadas como getter devuelven el valor del primer elemento de la colección; si están siendo usadas como setter, actualizarán el valor de todos los elementos de la colección. Teniendo en cuenta lo que hemos aprendido en el párrafo anterior, podemos refactorizar nuestro código para que quede así:

Si además sabemos que podemos pasar un objeto con todos los pares claves-valor que queremos modificar en una sola llamada, el código es:

Grabado a fuego.

Pero aún tenemos ese for ahí que no me gusta mucho, pues realmente estamos harcodeando o, como diría nuestra amiga Rocío, grabando a fuego, la cantidad de elementos a modificar. Para ello, nos fijamos en que cada grupo de imágenes está metido dentro de un div con clase mod_destacados diferentes entre sí. Además, un rápido vistazo nos permite ver que no hay más div.mod_destacados que grupos de imágenes, si participásemos en el grupo de desarrollo estaría bien que nos aseguráramos de esto o, mejor, añadir una clase estilo js-mod_destacado. Por lo tanto, lo que haremos será buscar todos los div con clase mod_destacados y dentro de cada uno de ellos modificar los attributos alt y title de las imágenes. El selector para los div es tan fácil como $('.mod_destacados'). Veamos el código completo y después lo explicamos:

Para entender este último código, sólo necesitamos aprender lo que hace la función each y la función find.

Llamaremos a la función each siempre sobre una colección jQuery y le pasaremos como parámetro una función. jQuery llamará dicha función, una vez por cada elemento de la colección, con el índice de dicho elemento dentro de la colección actual, y el elemento en sí. Además, dentro de la función parámetro, this se referirá al elemento correspondiente de la colección.

¿Os acordáis de que os comenté que la función $ valía para todo? Pues bien, en la línea 3 podéis ver que la llamamos con un único parámetro, this. Éste no es un selector por lo que no sabemos aún qué hace. Antes llamábamos a $ con un selector CSS y nos devolvía un objeto jQuery que envolvía a la colección; ahora que le pasamos un elemento del DOM, ¿qué devuelve? La respuesta es muy simple: nos devuelvo un objeto jQuery que envuelve a dicho elemento. De esta forma, podemos usar todos las funciones de jQuery en él. Por ejemplo, en este caso, usamos la función find.

La función find(selector) es muy similar a $ sólo que restringe la búsqueda a los nodos de la colección padre. Así $(this).find('img') busca todas las etiquetas imágenes dentro de $(this), es decir, entre sus nodos hijos.

De esta forma, sabiendo muy poquito de jQuery, hemos reducido un script de 37 líneas a sólo 7. Además, si aumentamos el número de imágenes, o lo reducimos, nuestro script seguirá funcionando.

Notas finales.

Como último comentario, decir que actualmente se favorece el uso de prop frente a attr en jQuery. El problema con la web del senado es que están usando jQuery 1.3.2

La versión de jQuery usada en senado.es es 1.3.2
La versión de jQuery usada en senado.es es 1.3.2

 

Un vistazo rápido a github nos permite comprobar que esa versión es de hace 4 años.