Gestione eventi in JavaScript

In JavaScript per agganciare un evento ad un elemento HTML si usa il metodo

JavaScriptCopia

<htmlObject>.addEventListener(nomeEvento, handlerFunzione)

passando la stringa con il nome delll'evento da gestire e la funzione associata, ad esempio:

JavaScriptCopia

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:

riferita ad un HTML come questo

HTMLCopia

<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.

Gestione eventi

A questo punto, per gestire un evento nella fase di capturing va passato un terzo parametro al metodo

JavaScriptCopia

<htmlObject>.addEventListener(nomeEvento, handlerFunzione, opzioni);

come in questo esempio

JavaScriptCopia

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

mentre su Chrome la sequenza è corretta