Contenido

Gestión de eventos vs Delegación de eventos

19 nov

+ 5

Este artículo llevaba ya más de un año entre los borradores, pero creo interesante darle salida. Así que es muy probable que este artículo te aburra, lo siento.

Una de las buenas prácticas de Javascript es el uso de eventos para separar la estructura de la funcionalidad, en ella especificamos la funcionalidad que los elementos indicados deberán ejecutar al ser accionados.

Este uso de eventos, puede ser tratado de dos formas:

  • Gestión de eventos
  • Delegación de eventos

Ambas ofrecen el mismo resultado, aunque, como veremos una es más óptima que otra a la hora de gestionar grandes cantidades de elementos.

Para enteder las diferencias entre ellas, mejor ver unos ejemplos y luego los comentamos.

HTML

<ul id="nav">
 <li><a href="#hola">Hola</a></li>
 <li><a href="#hola2">Hola2</a></li>
 <li><a href="#hola3">Hola3</a></li>
 <li><a href="#hola4">Hola4</a></li>
 <li><a href="#hola5">Hola5</a></li>
</ul>

Gestión de eventos

<script type="text/javascript">
   var nav = document.getElementById("nav");
   var as = nav.getElementsByTagName("a");
   for (var x = 0; x < as.length; x++) {
     as[x].onclick = function(){
        alert(this.innerHTML);
     }
   }
</script>

Como vemos esta técnica se basa en asociar un evento a cada link del listado #nav. Esto nos hace tener que recorrer todos los enlaces que encontramos dentro del listado y asociarle el evento.

Delegación de eventos

<script type="text/javascript">
   var nav = document.getElementById("nav");
   nav.onclick = function(e){
      var e = e || window.event; // Obtenemos el evento
      var el = e.target || e.srcElement; // Obtenemos el elemento que lanza el evento
      alert(el.innerHTML);
   }
</script>

Con esta opción delegamos al elemento #nav la tarea de decidir que elemento se está ejecutando y la tarea asociada a ellos. Esto es posible gracias al orden de ejecución de eventos sobre varios elementos.

Rendimiento

He hecho una serie de pruebas, sobre este mismo código, añadiendo 300/900 y 5000 elementos.

Tenemos que partir de dos mediciones a tener en cuenta:

  • Tiempo en aplicar los eventos
  • Tiempo en ejecutar el evento

A simple vista ya podemos conocer el resultado, la primera opción se vé penalizada por tener que aplicar a cada elemento del listado la funcionalidad, pero una vez hecho esto, la ejecución rápida y simple, ya que está asociada al elemento.

Por otro lado, la segunda opción es mucho más rápida a la hora de asociar la funcionalidad al elemento ya que siempre, sin importar el número de subelementos haya,  será un único elemento al que asociar. Pero por otro lado nos encontramos con que la ejecución de la funcionalidad debe detectar el elemento y despues la funcionalidad asociada.

Conclusiones

Como siempre digo, no es una forma mejor que otra, son diferentes formas que al conocerlas nos permitirá decidir cual es la que más se ajusta a las necesidades de cada proyecto.

Más información

  1. Javascript Event Delegation is Easier than you think
  2. Javascript Event Delegation and Event Handlers
  3. Event Delegation with jQuery
  4. Event Delegation made Easy
  5. Event Delegation with javascript
  • Siempre he preferido la delegación, pues tiene algunas ventajas sobre su contrincante.

    La mayor, creo yo, es lo útil que es en páginas con contenido dinámico, pues, cuando añadimos nuevos enlaces dentro del elemento #nav, éstos “heredan” el evento de manera automática.

    De todas formas, como siempre, hay que valorar en cada caso qué opción da mejor resultado.

    Saludos y felicidades por el blog!

  • A mi parece es mejor la gestión de eventos, prefiero que tarde en recorrer todos los elementos y asigne los eventos. Bueno de todas formas esta bien aclarado que es cuestión de tener en cuenta a lo que se va aplicar. (¿y el uso de memoria? )

    • @Marce: Evidéntemente el consumo de memoria es mayor en la gestión de eventos ya que se ha de alojar el mismo evento en cada elemento de la lista frente al único elemento que tendría que estar cargado la delegación.

      Lo importante es conocer las opciones disponibles para optar por la que más se ajuste a nuestras necesidades.

  • Para mi es algo muy nuevo estoy estudiando y pues todo lo que me ayude en la expansión de mis conocimientos siempre será favorable para mi, voy a poner esto en practica porque resulto ser bastante interesante para mi. Saludos

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.