Spiegazione del bubbling e dell'acquisizione di eventi in Javascript: come utilizzarli?

Pubblicato: 2020-03-26

Sommario

introduzione

Due terminologie molto comuni utilizzate per il flusso di eventi in JavaScript sono Event Bubbling e Event Capture .

Questi sono due modi importanti in cui un evento viene propagato nell'API DOM HTML quando entrambi gli elementi registrano un handle per un evento e l'evento si verifica in un elemento annidato in un altro elemento. L'ordine in cui un evento viene ricevuto dagli elementi è determinato dalla modalità di propagazione dell'evento. Continua a leggere per conoscere l'uso di Event Bubbling e Event Capture in JavaScript e perché questi sono richiesti nello sviluppo di pagine Web.

Da asporto chiave

  • Spiegazione dei termini evento, flusso di eventi, gestori di eventi e listener di eventi
  • Bubbling di eventi e acquisizione di eventi in JavaScript
  • Utilità di bubbling e acquisizione di eventi in JavaScript

Eventi e flusso di eventi

L'interazione delle pagine Web HTML con JavaScript è mediata da eventi che si verificano quando la pagina viene manipolata dall'utente o dal browser. Il caricamento di una pagina, l'utente che fa clic su un pulsante, la chiusura di una finestra, sono tutti esempi di eventi.

L'ordine in cui gli eventi vengono ricevuti sulla pagina Web è definito flusso di eventi. Il processo di flusso degli eventi viene completato in 3 fasi: acquisizione dell'evento (intercettazione dell'evento), targeting dell'evento (il target ottiene l'evento) e bubbling dell'evento (risposta all'evento).

Gestori di eventi e listener di eventi in JavaScript

Il gestore di eventi è un codice JavaScript che viene scritto all'interno dei tag HTML anziché nei tag <script>. I gestori di eventi eseguono JavaScript quando si verifica un evento come la pressione di un pulsante. La sintassi di base è: name_of_handler="Codice JavaScript qui"

<a href=”https://www.google.com” onClick=”alert('hello!)”>Goolge</a>

Una procedura che attende il verificarsi di un evento è un Event Listener. JavaScript ha una funzione incorporata, addEventListener(), che riceve l'evento da ascoltare e chiama un secondo argomento quando l'evento viene attivato. La sintassi è: element.addEventListener(event, listener);

Bubbling di eventi in JavaScript

Event Bubbling è una terminologia comune che si incontra durante lo sviluppo di una pagina Web o di un'applicazione Web utilizzando JavaScript. Il bubbling degli eventi è una fase nel processo del flusso di eventi in cui l'evento inizia nell'elemento più specifico o nel nodo più profondamente annidato nel DOM e successivamente scorre verso l'alto verso il nodo meno specifico, ovvero il documento.

Fonte

<!DOCTYPE HTML>
<html>
<testa>
<titolo>……</titolo>
</testa>
<corpo>
<div id="demo"> Premi qui.</div>
</corpo>
</html>

Facendo clic sull'elemento <div>, l'evento 'click' si verifica nel seguente ordine:

  1. <div>
  2. <corpo>
  3. <html>
  4. Documento

L'evento 'click' attiva l'elemento <div>. Ogni nodo viene successivamente attivato lungo l'albero DOM, verso l'alto, fino al raggiungimento del documento oggetto.

Leggi: Idee e argomenti di progetto a stack completo

Acquisizione di eventi in JavaScript

L'acquisizione di eventi è un modello alternativo nel flusso di eventi introdotto per la prima volta da Netscape Browser. Come affermato da questo modello, un evento viene ricevuto per primo dal nodo meno specifico e il nodo più specifico o l'elemento più profondamente annidato riceve l'evento per ultimo. In questo modello, un evento viene intercettato prima che raggiunga l'obiettivo effettivo. Tuttavia, a differenza di Event Bubbling, i browser moderni non supportano questo modello e quindi Event Capture può essere utilizzato solo in circostanze particolari.

Fonte

Facendo riferimento all'esempio riportato nella sezione precedente, facendo clic sull'elemento <div> si attiva l'evento 'click' nel seguente ordine:

  1. Documento
  2. <corpo>
  3. <html>
  4. <div>

Cosa succede nella fase di acquisizione dell'evento?

Nella fase di cattura dell'evento vengono chiamati i listener del catturatore il cui valore è registrato come “vero”. Si scrive nel modo seguente:

el.addEventListener('Click', listener, true)

Qui viene catturato un evento perché il valore del listener è registrato come "true". Nel caso in cui non sia presente alcun valore, il valore predefinito è "falso" con il risultato che l'evento non viene catturato. Quindi in questa fase vengono chiamati e catturati solo gli eventi con valore vero. Nella successiva fase di destinazione, vengono chiamati tutti i listener registrati, indipendentemente dal fatto che il loro valore sia registrato come true o false.

Flusso di eventi DOM in JavaScript

Il DOM Livello 2 specifica tre fasi del modello di flusso di eventi:

  • Fase di acquisizione degli eventi
  • Al bersaglio
  • Fase di ribollimento dell'evento

Fonte

Se c'è un'opportunità di intercettare l'evento, si verifica prima l'Event Capture. Questo è seguito dall'obiettivo effettivo che ottiene l'evento. Alla fine, nella fase di ribollimento dell'evento, ha luogo la risposta finale all'evento. Facendo riferimento all'esempio riportato nella sezione precedente, cliccando sull'elemento <div> si attiva l'evento 'click' nell'ordine illustrato nel diagramma sopra.

Leggi: Stipendio per sviluppatori Full Stack in India

Utilità di bubbling e acquisizione di eventi in JavaScript

Nella Fase Event Bubbling, vengono chiamati solo gli eventi con valore di flag “false” (non catturatori). Il Bubbling e l'Event Capture sono aspetti importanti del DOM.

el.addEventListener('Click', listener, false) // listener non cattura
el.addEventListener('Click', listener) // listener non cattura

Il codice sopra esemplifica il funzionamento delle fasi di gorgogliamento e cattura. Ogni evento non raggiunge l'obiettivo. Alcuni eventi non vengono generati e si interrompono dopo la fase target. L'evento bubbling non è applicabile in tutti i tipi di eventi e il listener dovrebbe avere la proprietà booleana ".bubble" dell'oggetto dell'evento oltre a possedere alcune altre proprietà come – e.target (per fare riferimento alla destinazione dell'evento) e e.eventPhase (i listener correnti si registrano in questa modalità).

Conclusione

Il flusso di eventi in JavaScript ha tre fasi importanti: la fase di acquisizione degli eventi, la fase di destinazione e la fase di bubbling degli eventi. Event Capture è il primo a verificarsi, in cui gli eventi vengono intercettati se necessario. Questo è seguito dall'evento che raggiunge l'obiettivo effettivo e la fase finale è gorgogliante, quando si verifica la risposta finale a un evento. Pertanto, si può opportunamente concludere che il Bubbling e l'Event Capture in JavaScript sono le basi da cui dipendono il gestore di eventi e la delega di eventi.

Se sei interessato a saperne di più sullo stack completo, dai un'occhiata al diploma PG di upGrad e IIIT-B in sviluppo software full-stack, progettato per i professionisti che lavorano e offre oltre 500 ore di formazione rigorosa, oltre 9 progetti e incarichi, IIIT- B Status di ex alumni, progetti pratici pratici e assistenza sul lavoro con le migliori aziende.

Atterra sul lavoro dei tuoi sogni

UPGRAD E DIPLOMA PG DI IIIT-BANGALORE IN SVILUPPO SOFTWARE
Scopri di più @ upGrad