Consejo rápido Delegación de eventos JavaScript en 4 minutos

La delegación de eventos puede ser un tema confuso para aquellos que no están familiarizados con el concepto. Pero, por suerte, es muy simple. En este video tutorial de consejos rápidos, demostraré el concepto en menos de cuatro minutos..

Entrar en la delegación de eventos

En cambio, con la delegación de eventos, simplemente agregamos un único detector de eventos a un elemento ancestro, tal vez algo como una "ul". Luego, cuando el usuario hace clic en uno de sus elementos secundarios, como una etiqueta de anclaje, solo verificamos si el objetivo del clic era, de hecho, una etiqueta de anclaje. Si así fuera, procedemos según lo habitual..

$ ('ul'). click (función (e) if ($ (e.target) .is ('a')) alert ('clicked'););

Ventajas

• Solo adjunte un detector de eventos a la página, en lugar de quinientos (en nuestro ejemplo)
• Los elementos creados dinámicamente seguirán vinculados al controlador de eventos.

¿Por qué funciona esto??

Funciona debido a la forma en que se capturan los elementos (no IE) y se hacen burbujas. Por ejemplo, considere la siguiente estructura simple.

 
Ancla
 

Al hacer clic en la etiqueta de anclaje, también se hace clic en el elemento 'li' y 'ul' e incluso en el elemento 'body'. Esto se conoce como burbujeo.

Notas sobre este Screencast

Tenga en cuenta que este es solo un ejemplo simple para explicar la funcionalidad. Utilizamos jQuery, solo porque tenía cuatro minutos para grabar. En ese ejemplo en particular (mire primero el screencast), podríamos haber usado dos opciones alternativas:

1. Pase true como un parámetro del método clone (). Esto luego clonaría el elemento, así como cualquier controlador de eventos..
2. Utilice el método live () en su lugar. Sin embargo, tenga cuidado al usar este método: vuelve a unir el controlador de eventos X veces. Esto puede no ser necesariamente necesario.

Sobre todo, esto estaba destinado a demostrar la idea. Con JavaScript regular, podrías hacer algo como:

// Obtenga un poco de lista desordenada, que contiene etiquetas de anclaje var ul = document.getElementById ('elementos'); // Controlador de eventos de navegador cruzado rápido y simple: para compensar la función del controlador addEvent de IE addEvent (obj, evt, fn, capture) if (window.attachEvent) obj.attachEvent ("on" + evt, fn);  else if (! capture) capture = false; // capture obj.addEventListener (evt, fn, capture) // Compruebe si el nodo en el que se hizo clic es una etiqueta de ancla. Si es así, proceda según lo habitual. addEvent (ul, "click", function (e) // Firefox e IE acceden al elemento de destino diferente. e.target y event.srcElement, respectivamente. var target = e? e.target: window.event.srcElement; if (target.nodeName.toLowerCase () === 'a') alert ("clicked"); devolver falso;);

• Síganos en Twitter o suscríbase a Nettuts + RSS Feed para obtener los mejores tutoriales de desarrollo web en la web..