In
JavaScript per
agganciare un evento ad un elemento
HTML si usa il metodo
<htmlObject>.addEventListener(nomeEvento, handlerFunzione)
passando la stringa con il nome delll'evento da gestire e la funzione associata, ad esempio:
var htmlObj = document.getElementById("id-elemento-html");
htmlObj.addEventListener("click", handleClick);
function handleClick(event){
console.log(event);
}
In questo modo, senza parametri aggiuntivi, l'evento
click viene agganciato alla
fase di
bubbling.
Capturing e Bubbling
Ma cosa significa
bubbling.
Per chiarire come vengono gestiti gli eventi in
JavaScript può tornare utile riferirsi alla figura seguente:
Sequenza eventi Capturing e bubbling riferita ad un
HTML come questo
<div id="element-1" style="background-color: rgb(255, 152, 0);">
<p>element-1</p>
<div id="element-2" style="background-color: rgb(255, 60, 0);">
<p>element-2</p>
<div id="element-3" style="background-color: rgb(139, 189, 33);">
<p>element-3</p>
<div id="element-4" style="background-color: rgb(253, 197, 22);">
<p>element-4</p>
</div>
</div>
</div>
</div>
nella figura ho riportato l'esempio di un
click sull'elemento
element-4.
Gli eventi vengono scatenati dall'elemento più esterno
element-1, fino all'elemento su cui si è cliccato (
element-4). Questa fase è detta di
capturing.
Finita questa fase inizia quella di
bubbling dove gli eventi vengono scatenati in ordine
inverso, partendo dall'elemento su cui si è cliccato fino ad arrivare all'esterno.
Gli eventi vengono sempre scatenati in questa sequenza, poi sta a noi decidere se gestirli o meno in base alle necessità.
Gestione eventi
A questo punto, per gestire un evento nella fase di
capturing va passato un
terzo parametro al metodo
<htmlObject>.addEventListener(nomeEvento, handlerFunzione, opzioni);
come in questo esempio
var html = document.getElementById("id-elemento-html");
html.addEventListener("click", handleClick, true);
// oppure
html.addEventListener("click", handleClick, { capture: true });
function handleClick(event){
console.log(event);
}
mentre per la fase di
bubbling, come si è visto prima, si tratta dell'impostazione di
default quindi non va passato il parametro (oppure in alternativa
false o
{ capture: false }).
Demo
Per mostrare come vengono scatenati gli eventi ho creato questa simulazione.
Cliccando su un elemento, verranno riportati nel riquadro grigio la sequenza con ci vengono generati gli eventi:
Dove:
- Nr: è il numero di sequenza dell'elemento HTML (1=elemento più esterno)
- Type: tipo di evento Capturing o Bubbling
- Current: id dell'elemento HTML che ha generato l'evento
- Target: id dell'elemento HTML su cui è stato fatto il click
Attenzione
Attenzione, sembra che
Firefox inverta la sequenza degli eventi sull'elemento su cui si è cliccato
Firefox mentre su
Chrome la sequenza è corretta
Chrome