Event Delegation

Cualquier tipo de interacción de los scripts con la estructura HTML requiere del uso de event listeners en cualquiera de sus formas (explicítos dentro del HTML o “unobstrusivos” dentro de un script).
De esta manera se logra capturar un evento para un elemento, el usuario clickea un botón, presiona enter sobre un textarea, etc. Básicamente, se observa un elemento para el cual corresponde una acción (callback o event handler para los conocidos).

Event observe

Event observe

Con esta tendencia tendremos n observers para los n elementos requeridos. Esto puede lograrse sin mucha dificultad usando las distintas librerías existentes (YUI, jQuery o Mootools por ejemplo) o con cierto conocimiento de las diferencias existentes entre el estándar y IE.

Event observer

Multiples event observers

A esta metodología (event observe) se le suma una derivada (event delegation, como bien habrán imaginado) que parte de la idea de no observar un conjunto de elementos similares, sino a su contenedor. Para ello, se hace uso del funcionamiento que presentan los eventos, más precisamente del Event Bubbling, que expone la forma en la cual los eventos se van disparando para el elemento en cuestión y todos sus ancestros respetando siempre el Event Target original (lo cual permite capturar el nodo al cual se dirigió el usuario).

El uso de delegates tiene dos grandes ventajas con respecto al de los observers tradicionales:

Reduce la complejidad del desarrollo para situaciones específicas: Imaginemos un menú dinámico, donde los items van apareciendo y desapareciendo, utilizando los observers clásicos esto implicaría generar la lógica de alta/baja de observers conjuntamente al de los items.
Utilizando delegates generamos una capa de abstracción entre el observer y los sujetos a observar, siendo indistinta la existencia, cantidad o calidad de los mismos. De esta manera, dar de alta o baja un item no tiene mayor problema que insertarlo dentro del HTML.

Reduce el costo en términos de recusos: El uso de un delegate implica observar de hecho un único elemento, independientemente de la cantidad de nodos objetivo que existan dentro del mismo, lo cual obviamente es mucho más eficiente que levantar uno por cada nodo a observar.

Actualmente, la gran mayoría (por no decir todas) las librerías con utilidades de este tipo implementan algún tipo de funcionalidad específica para usar delegates.

jQuery

$("table").delegate("td", "hover", function(){
	$(this).toggleClass("hover");
});

// "equivalente" a 

$("table").each(function(){
	$("td", this).live("hover", function(){
		$(this).toggleClass("hover");
	});
});

YUI3

// Observamos todos los nodos li del nodo #container
YUI().use("event-delegate", function(Y) {
    Y.delegate("click", function(e) {
		// ...
    }, "#container", "li");
});

MooTools

// Observamos los nodos li del nodo con id menu
$('menu').addEvent('li', function(event, clicked){
	// event target original
    clicked.setStyle('color', '#777');
});

Prototype

// observamos todos los nodos que correspondan al selector a.comment
// dentro del nodo #messages
$("messages").on("click", "a.comment", function(event, element) {
   // ...
});

Leer más:



Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Comment

You may use these tags : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>