aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

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