Event Bubbling e Event Capturing sono i termini più utilizzati in JavaScript al momento del flusso di eventi. Questi sono i due modi di propagazione degli eventi nell'API HTML DOM. Questo articolo su Event Bubbling e Event Capturing in JavaScript descriverà in dettaglio il motivo per cui li richiediamo in nella seguente sequenza:
Che cos'è l'Event Bubbling in JavaScript?
Event Bubbling è il termine che le persone devono incontrare durante lo sviluppo di un'applicazione Web o di una pagina Web utilizzando . Fondamentalmente, l'Event Bubbling è una tecnica in cui i gestori di eventi vengono chiamati quando un elemento è annidato su un altro elemento e deve essere dello stesso evento. È simile all'incapsulamento.
Event Bubbling è solo una piccola parte della gestione degli eventi in JavaScript. Per capirlo meglio, dobbiamo conoscere la propagazione degli eventi e come supporta l'Event Bubbling.
Cos'è la propagazione degli eventi?
La propagazione degli eventi può essere paragonata come termine genitore con il bubbling e l'acquisizione di eventi come figlio.È rappresentato come segue:
Se si fa clic su qualsiasi immagine, non solo si genera un evento clic, ma si passa al genitore 'a' e al nonno 'li'. In questo modo avviene la propagazione della funzione. Qui l'immagine è considerata come il bambino ed è il target dell'evento in cui viene generato il clic. L'immagine insieme ai suoi antenati forma insieme il ramo nella terminologia di un albero. Il ramo è importante poiché si arriva a conoscere il percorso lungo il quale si propaga l'evento.
Ciascuno dei listener viene chiamato rispettivamente con un oggetto evento che raccoglie informazioni sull'evento. Questa propagazione è molto importante in quanto veniamo a conoscenza del processo di chiamata di tutti gli ascoltatori per un determinato evento. Dall'immagine sopra possiamo notare che la determinazione del ramo è statica. Qualsiasi modifica dell'albero che si verifica durante l'evento viene ignorata. Qui la propagazione è bidirezionale cioè va dalla finestra al target dell'evento e torna indietro. Qui la propagazione è ampiamente classificata in tre tipi principali. Quelli sono:
system.exit (1) java
- La fase di cattura: Passaggio dalla finestra alla fase target dell'evento.
- La fase target: È la fase obiettivo.
- La fase della bolla: Dal genitore di destinazione dell'evento torna alla finestra.
Cos'è l'acquisizione di eventi?
In questa fase vengono chiamati i listener del capturer il cui valore è stato registrato come 'true'. È scritto come:
el.addEventListener ('click', listener, true)Qui il valore dell'ascoltatore è stato registrato come 'vero', quindi questo evento viene catturato. Se non ci fosse alcun valore, il valore per impostazione predefinita era falso e l'evento non sarebbe stato catturato. Quindi in questa fase quell'evento il cui valore è vero trova solo la strada dalla finestra e viene chiamato e catturato.
Quindi, nella fase di destinazione dell'evento, tutti i listener registrati vengono chiamati indipendentemente dal loro stato di flag che è vero o falso.
Utilizzo di Event Bubbling e Event Capturing in JavaScript
Nella fase di Bubbling viene chiamato solo il non capturer, cioè gli eventi che hanno valore flag come “false”. Event bubbling e Event Capturing sono molto utili e importanti nella terminologia DOM (Document Object Model).
el.addEventListener ('click', listener, false) // listener non cattura el.addEventListener ('click', listener) // listener non catturaLa parte di codice sopra mostra il funzionamento della fase di bubbling e cattura. Non tutti gli eventi vanno al target dell'evento. Alcuni di loro non vengono ribolliti. Il loro viaggio si interrompe dopo la fase target. Il flusso di fase a tre eventi è illustrato nel diagramma seguente:
copia superficiale java vs copia profonda
Il bubbling degli eventi non funziona in tutti i tipi di eventi, tuttavia l'ascoltatore deve possederlo '.bolla 'Proprietà booleana dell'oggetto evento. Alcune delle altre proprietà includono:
- e.target: che fa riferimento al target dell'evento.
- e.currentTarget: è la modalità in cui sono registrati gli ascoltatori correnti. Qui si fa riferimento al valore utilizzando Questo parola chiave.
- e.eventPhase: È un numero intero che fa riferimento ad altre tre parole chiave come Capturing_phase, Bubbling_phase, AT_Target fase.
Procedura di lavoro
Diamo uno sguardo più da vicino nell'illustrazione sopra. Facciamo clic sull'elemento 'buttonOne' e quindi immediatamente verrà attivato un evento. Normalmente un evento inizia il suo viaggio dalla radice che è l'elemento più in alto dell'albero. Quindi segue l'albero l'evento target che è “buttonOne”. Ecco come viaggia:
Come mostrato nella figura, l'evento si fa strada attraverso le terminologie DOM raggiungendo alla fine l'evento target. Ora una volta che l'evento raggiunge il suo obiettivo non finisce. Va avanti all'infinito all'interno delle terminologie DOM come illustrato nell'immagine sottostante.
Proprio come prima, ogni elemento lungo il percorso dell'evento mentre si muove viene notificato della sua esistenza. Mentre va avanti in questo modo, devi pensare se possiamo fermare il processo o meno. Ebbene, la risposta alla domanda è Sì, possiamo fermare la propagazione dell'evento. Questo viene fatto invocando il 'StopPropagation' metodo dell'oggetto evento.
window.addEventListener ('click', e => {e.stopPropagation ()}, true) window.addEventListener ('click', listener ('c1'), true) window.addEventListener ('click', listener ('c2 '), true) window.addEventListener (' click ', listener (' b1 ')) window.addEventListener (' click ', listener (' b2 '))Applicando la parola chiave siamo in grado di fermare la propagazione. Funziona in questo modo, quando applichiamo la parola chiave ' stopPropagation ' quindi tutti gli eventi sotto gli eventi principali non vengono chiamati e quindi non verrebbero chiamati come menzionato nella parte di codice sopra. C'è un'altra parola chiave nota come ' stopImmediatePropagation '. Come suggerisce il nome, interrompe immediatamente il procedimento dei fratelli.
cos'è lo swing in java
Con questo siamo giunti alla fine del nostro articolo. Spero che tu abbia capito cosa sono Event Bubbling e Event Capturing in JavaScript.
Ora che conosci Event Bubbling e Event Capturing in JavaScript, controlla il file di Edureka. La formazione sulla certificazione per lo sviluppo web ti aiuterà a imparare come creare siti Web straordinari utilizzando HTML5, CSS3, Twitter Bootstrap 3, jQuery e API di Google e a distribuirli su Amazon Simple Storage Service (S3).
Hai domande per noi? Si prega di menzionarlo nella sezione commenti di 'Bubbling di eventi e acquisizione di eventi in JavaScript' e ti risponderemo.