La delegazione degli eventi (event delegation) in jQuery

La delegazione degli eventi (event delegation) in jQuery fa riferimento alla possibilità di associare ad un elemento genitore un gestore di eventi che verrà attivato sugli elementi discendenti sia per quelli già presenti che per quelli che verranno creati in futuro.

Esempio

Consideriamo la seguente struttura DOM:

<div id="container">
    <ul id="list">
        <li><a href="http://
domain1.com">Item #1</a></li>
        <li><a href="/local/path/1">Item
#2</a></li>
        <li><a href="/local/path/2">Item
#3</a></li>
        <li><a href="http://
domain4.com">Item #4</a></li>
    </ul>
</div>

Quando un link viene cliccato vogliamo inviare il suo testo alla console JavaScript. Normalmente useremmo il metodo .on() in questo modo:

$('#list a').on('click', function(event) {
	event.preventDefault();
	console.log($(this).text());
});

Ma che cosa succede se aggiungiamo un nuovo elemento dopo che abbiamo già registrato il gestore di eventi?

$('#list').append('<li><a href="http://
newdomain.com">Item #5</a></li>');

Cliccando sul nuovo link appena inserito non succede nulla.

Propagazione degli eventi

Cosa accade nel DOM quando clicchiamo su uno dei link? L'evento si propaga risalendo nell'albero del documento fino a raggiungere l'oggetto document, come mostrato nel seguente schema.

• a
• li
• ul#list
• div#container
• body
• html
• document

Sapendo come funziona la propagazione degli eventi, possiamo creare un evento delegato:

$('#list').on('click', 'a', function(event) {
	event.preventDefault();
	console.log($(this).text());
});

In questo caso il selettore a diventa il secondo parametro del metodo .on(). Ciò significa che in tal modo anche i link che verranno aggiunti in seguito riceveranno lo stesso gestore di eventi.