Comprensione della propagazione degli eventi in JavaScript

Gli eventi in JavaScript si comportano come notifiche che un'interazione dell'utente o un'altra azione ha avuto luogo. Ad esempio, quando fai clic su un pulsante di un modulo, il tuo browser genera un evento per indicare che ciò è accaduto. Anche la digitazione in una casella di ricerca genera eventi ed è così che spesso funziona il suggerimento automatico online.

In JavaScript, gli eventi che coinvolgono l'interazione dell'utente di solito si attivano contro elementi specifici. Ad esempio, facendo clic su un pulsante viene generato un evento contro quel pulsante. Ma gli eventi si propagano anche: sparano contro altri elementi nella gerarchia del documento.

Continua a leggere per sapere tutto sulla propagazione degli eventi e sui due tipi distinti disponibili.

Che cos'è la gestione degli eventi in JavaScript?

Puoi utilizzare il codice JavaScript per catturare e rispondere agli eventi generati da una pagina web. È possibile eseguire questa operazione per ignorare il comportamento predefinito o intraprendere un'azione quando non esiste alcun valore predefinito. Un esempio comune è la convalida dei moduli. La gestione degli eventi consente di interrompere il normale processo di invio del modulo.

Considera questo esempio:

Cliccami

Il codice sopra ha un elemento pulsante con un id denominato pulsante. Ha un listener di eventi clic che visualizza un avviso con il messaggio Ciao mondo.

Che cos'è la propagazione degli eventi?

La propagazione degli eventi descrive l'ordine in cui gli eventi viaggiano attraverso il albero DOM quando il browser web li attiva.

Supponiamo che ci sia un tag form all'interno di un tag div ed entrambi abbiano ascoltatori di eventi onclick. La propagazione degli eventi descrive come un listener di eventi può attivarsi dopo l'altro.

Esistono due tipi di propagazione:

1. Evento gorgogliante, con il quale gli eventi gorgogliano verso l'alto, da bambino a genitore.
2. Cattura degli eventi, con cui gli eventi viaggiano verso il basso, da genitore a figlio.

Che cos'è il bubbling degli eventi in JavaScript?

Il bubbling dell'evento significa che la direzione della propagazione dell'evento sarà dall'elemento figlio al suo elemento padre.

Considera il seguente esempio. Ha tre elementi annidati: div, form e button. Ogni elemento ha un clic ascoltatore di eventi Il browser visualizza un mettere in guardia con un messaggio quando si fa clic su ciascun elemento.

Per impostazione predefinita, l'ordine in cui il browser Web visualizza gli avvisi sarà button, form, quindi div. Gli eventi si susseguono da bambino a genitore.

 div


 modulo 



 Pulsante

Che cos'è l'acquisizione di eventi?

Con l'acquisizione degli eventi, l'ordine di propagazione è l'opposto del gorgogliamento. Altrimenti, il concetto è identico. L'unica differenza con l'acquisizione è che gli eventi si verificano da genitore a figlio. A differenza dell'esempio precedente, con l'acquisizione di eventi, il browser visualizzerà gli avvisi in questo ordine: div, form e button.

Per ottenere l'acquisizione degli eventi, è necessario apportare solo una modifica al codice. Il secondo parametro di addEventListener() definisce il tipo di propagazione. È false per impostazione predefinita, per rappresentare il gorgogliamento. Per abilitare l'acquisizione degli eventi, è necessario impostare il secondo parametro su true.

 div.addEventListener("clic", ()=>{
 alert("div")
 }, vero);
 form.addEventListener("click", ()=>{
 avviso("modulo")
 }, vero);
 button.addEventListener("click", ()=>{
 avviso ("pulsante")
 }, vero);

Come puoi prevenire la propagazione degli eventi?

Puoi fermare la propagazione degli eventi usando il stopPropagazione() metodo. Il addEventListener() accetta un nome di evento e una funzione del gestore. Il gestore accetta un oggetto evento come parametro. Questo oggetto contiene tutte le informazioni sull'evento.

Quando invochi il stopPropagazione() metodo, l'evento smetterà di propagarsi da quel punto. Ad esempio, quando usi stopPropagazione() sull'elemento form, gli eventi smetteranno di ribollire fino al div. Se fai clic sul pulsante, vedrai gli eventi generati sul pulsante e sul modulo, ma non il div.

form.addEventListener("click", (e)=>{
e.stopPropagation();
 alert("modulo");
});

Imparentato: Il Cheat Sheet di JavaScript definitivo

JavaScript ha molto potere sotto il cofano

La gestione degli eventi di JavaScript è potente, paragonabile a molti linguaggi di interfaccia conclamati. Quando sviluppi applicazioni web interattive, è una parte vitale della tua cassetta degli attrezzi. Ma ci sono molti altri argomenti avanzati da afferrare. Per gli sviluppatori JavaScript professionisti, c'è molto da imparare!

Se vuoi imparare a codificare JavaScript come un professionista, dai un'occhiata alla nostra guida ai liner intelligenti e preparati a stupire nella tua prossima intervista.

11 JavaScript One-Liner che dovresti sapere

Ottieni molto con solo un piccolo codice utilizzando questa vasta gamma di JavaScript one-liner.

Leggi Avanti

Circa l'autore