La delegazione di eventi

La delegazione di eventi è una tecnica Javascript/DOM che ho trovato utile in alcune occasioni, si tratta di non controllare ogni singolo nodo di cui ci interessa un evento, e monitorarne un altro nodo più in alto nella radice DOM.

Un esempio per chiarire: abbiamo una serie di campi input testuali, vogliamo controllare il cambiamento di tutti quanti; classicamente dovremmo attaccare un EventListener ad ognuno di essi (oppure aggiungere una proprietà onChange o simile). Beh invece si può attaccare un solo EventListener ad un elemento che contiene tutti i campi (come l’elemento “form” ad esempio).

Questo è possibile perché gli eventi si trasmettono attraverso l’albero dei nodi, per maggiori informazioni a proposito (ma diventa piuttosto tecnico), si trovano sulla documentazione ufficiale DOM, sezione Eventi.

Potrebbe però diventare utile, a questo punto, scoprire qual’è l’elemento che ha generato l’evento, perché this farà riferimento al nodo a cui abbiamo aggiunto l’EventListener, non al campo testuale. Tra le proprietà dell’evento infatti c’è target oppure srcElement, dipende dal browser. Per essere sicuro che funzioni, io utilizzo il seguente codice: var element = e.target || e.srcElement;

[via HTML]

Ti potrebbe interessare...

• Aggiungere e togliere Classi CSS: toggleClassName
• Mischiare un array: mix()
• Parole (\w+) con lettere accentate nelle regular expression Javascript
• Migliorare il codice Javascript: indentazione, spazi, tabulazione, a capo e formattazioni
• Guida per installare l’add-on Greasemonkey su Firefox per personalizzare siti internet