Delegování událostí pomocí MooTools, Dojo a jQuery

Před několika týdny jsem se zabýval detaily delegování událostí v JavaScriptu, ale většina vývojářů používá JavaScriptové rámce, takže jsem si řekl, že si najdu chvilku a ukážu vám, jak implementovat tuto skvělou událostní strategii pomocí MooTools, Dojo a jQuery JavaScript frameworks.

JavaScript MooTools

Třída Element.Delegation s MooTools More umožňuje vývojářům delegovat uživatelské události v rámci jejich aplikace. Syntaxe vypadá velmi podobně jako metoda addEvent třídy Event od MooTools s tou výjimkou, že :relay pseudo vám umožňuje zadat argument, který představuje prvky, které by měly odpovídat na delegování:

// link-list is the parent, a is the child elements
document.id("link-list").addEvent("click:relay(a)", function(event,node){
	console.log("you clicked a link!",node);
});

Tým MooTools použil addEvent s vlastní přenosovou metodou, aby bylo přidání delegování události do uzlů velmi podobné přiřazení nativní události. Doufám, že se vám to líbí!

JavaScript jQuery

jQuery používá pro delegování událostí inteligentně pojmenovanou metodu delegování:

$("#link-list").delegate("a", "click", function(){
	// "$(this)" is the node that was clicked
	console.log("you clicked a link!",$(this));
});

Metoda delegování přijímá tři argumenty: selektor, který se má porovnat, událost, na kterou se má odpovědět, a zpětné volání, se kterým se má pro daný uzel spustit.

Dojo JavaScript

Možnosti delegování událostí sady nástrojů Dojo jsou dostupné ve zdroji dojox.NodeList.delegate. Podobně jako jQuery používá Dojo pro delegování událostí metodu delegování:

// Require the resource
dojo.require("dojox.NodeList.delegate");

// *Sigh* When the DOM is ready...
dojo.ready(function() {
	// Assign an event
	dojo.query("#link-list").delegate("a","onclick",function(event) {
		// "this.node" is the node that was clicked
		console.log("you clicked a link!",this);
	});
});

Metoda delegování přijímá stejné argumenty jako jQuery: selektor, typ události a zpětné volání.

Delegování událostí je užitečné zejména pro aplikace, které dynamicky vytvářejí a odstraňují uzly DOM. Představte si tu noční můru v nutnosti často přiřazovat události (novým uzlům) a odstraňovat události z odstraněných uzlů (aby se zabránilo únikům paměti IE). Využijte plně možnosti delegování každého rámce – rychle se začnou používat!