Delegowanie akcji w JavaScriptDelegowanie akcji to wbudowana cecha języka JavaScript. Pozwala na błyskawiczne przypisanie akcji do całej grupy elementów. Jak to możliwe? Wykorzystujemy przodka, który oddelegowuje zadanie do elementów, znajdujących się niżej w hierarchii DOM.

Pora na przykład


<ul id="kiss-design-list>
	<li><a href="http://google.pl">Google</a></li>
	<li><a href="http://wikipedia.pl">Wiki</a></li>
	<li><a href="http://smashingmagazine.com">SM</a></li>
	<li><a href="http://kissdesign.pl">KISS design</a></li>
</ul>

Stara szkoła uczyła w ten sposób:


window.onload = function () {
    var list  = document.getElementById("kiss-design-list");
    var links = list.getElementsByTagName("a");
    for (var i = 0; i < links.length; i++) {
        links[i].onclick = function () {
		alert("Heey-ya!");
		return false;
        }
    }
};

Działa? Działa. Z tym, że rozwiązanie wymaga napisania sporo kodu. Przelatujemy pętlą po wszystkich odnośnikach na liście i dla każdego z nich przypisujemy akcję.

Zrób to lepiej, czyli delegacja eventów


window.onload = function () {
    var list = document.getElementById("kiss-design-list");
    list.onclick = function (e) {
        var event = e || window.event;
        var target = event.target || event.srcElement;
        if(target.nodeName.toLowerCase() === 'a') {
		alert("Heey-ya!");
		return false;
	}
    }
};

Volia! Wpierw przypisujesz akcję jednemu z przodków, elementów, których akcje chcesz obsłużyć. W tym przykładzie dodajemy akcję elementowi ul#kiss-design-list. Następnie sprawdzasz kto był rzeczywistym celem eventu. Jeżeli celem jest odnośnik (użycie pola nodeName), to obsługujesz akcję.

Można jeszcze krócej?

Zapis mógłby być jeszcze krótszy, ale przeglądarki w różny sposób dostarczają obiekty Event i informacje na temat celu. Stąd linie 4 i 5. Aby otrzymać rozwiązanie w pełni cross-browser, przeczytaj poprzedni wpis o akcjach w JavaScript. Oczywiście korzystając z gotowych frameworków w stylu jQuery, nie musisz się zupełnie o to martwić.

Return false. Or maybe true.

Pamiętaj, aby po obsłudze akcji zwracać false, jeżeli nie chcesz by przeglądarka wykonała domyślną akcję (w tym przypadku przekierowanie do odpowiedniej strony). Dzięki temu po kliknięciu na link, użytkownik zobaczy jedynie okno alertu.

Czy delegacja akcji faktycznie jest uproszczeniem? Może wolisz korzystać z frameworków, nawet jeżeli masz do napisania jedną funkcję w JS? Podziel się wrażeniami w komentarzu.