Javascript: Esempio d’uso di Event Delegation

L’uso degli Event Delegation in Javascript, consente di aggiungere particolari listeners a nodi di elementi HTML. In tal modo il listener è legato a tutti i suoi figli e non ad uno in particolare.

Per comprendere l’uso degli Event Dialogation procediamo direttamente fornendo degli esempi d’uso:
Prendiamo come primo esempio una unordered list


<ul id="list">
   <li id="child-1">Child 1</li>
   <li id="child-2">Child 2</li>
   <li id="child-3">Child 3</li>
   <li id="child-4">Child 4</li>
   <li id="child-5">Child 5</li>
</ul>

Prendiamo ora in considerazione la necessità di far scaturire un’azione quando uno dei child è cliccato.

La prima soluzione, ovviamente la più dispendiosa, è aggiungere un listener per ognuno degli elementi di questa lista. Chiaramente questa deve essere scartata a priori, basta solo pensare all’eventualità che un elemento venga aggiunto dinamicamente alla lista.
La migliore soluzione consiste nell’uso degli Event Delegation nel nodo ul


document.getElementById("list").addEventListener("click",function(e) {
// do something
});

Così facendo per ogni elemento cliccato, l’evento risulterà fired ma ancora non sapremo da quale degli elementi figlio è provenuto.
Per ottenere questa informazione occorrerà controllare i parametri target e nodeName dell’oggetto evento. Nel caso in cui il nodeName è uguale a li allora, l’evento dovrà essere gestito in modo da ottenere il nome dell’elemento cliccato. Questo valore è contenuto nel parametro target.

Ora sorge un problema: “come riconosco quale dei child è stato cliccato?”. Per ogni elemento cliccato, l’evento risulterà fired ma ancora non sapremo da quale degli elementi figlio è provenuto.
Per ottenere questa informazione occorrerà controllare i parametri target e nodeName dell’oggetto evento. Nel caso in cui il nodeName è uguale a li allora, l’evento dovrà essere gestito in modo da ottenere il nome dell’elemento cliccato. Questo valore è contenuto nel parametro target.
Codice:


if(e.target && e.target.nodeName == "LI") {
   // alert the clicked node id
   alert("Hai cliccato su "+e.target.id);
}

A questo punto l’esempio sarà funzionante!
Potremmo entrare nello specifico, assegnando eventi particolari basati sulla classe di stile a cui i figli della lista appartengono. Tutte le informazioni necessarie sono contenute nei parametri dell’oggetto evento. Per le classi di stile dovremo ad esempio controllare il parametro target.className.

Per vedere l’esempio funzionante, e scaricarne il sorgente clicca su uno dei seguenti pulsanti social. Verrà mostrato l’indirizzo all’esempio!

[like_to_read]
Esempio
[/like_to_read]

Michele Pierri

Sviluppatore android/web/desktop, blogger, nonchè sostenitore incallito dell'universo Cloud Computing, nel tempo libero amo fare sport e praticare arti marziali.