Event gorgogliante o cattura dell'evento in JavaScript

Quando si verifica un evento, la propagazione dell'evento determina l'ordine dell'elemento per l'esecuzione degli eventi. Nel modello di oggetto document (DOM) HTML, esistono due metodi per la propagazione degli eventi: gorgogliamento eventi e cattura degli eventi. In caso di gorgogliamento, l'evento relativo all'elemento più interno o figlio viene elaborato per primo. Al contrario, nell'acquisizione di eventi, viene gestito un evento associato all'elemento più esterno o del genitore, quindi il controllo del flusso dell'evento si avvicina all'elemento figlio passo per passo passo per passo.

Questo articolo discuterà dell'evento JavaScript e cattura dell'evento. Inoltre, gli esempi relativi al gorgogliamento di eventi e alla cattura degli eventi saranno dimostrati in questo articolo. Quindi iniziamo!

Evento che gorgoglia in JavaScript

In JavaScript, l'evento gorgogliamento è un evento che bolle dal bersaglio o dagli elementi più interni ai suoi genitori, quindi segue un approccio dal fondo per top e sposta il flusso di controllo dell'evento ai suoi antenati. Il gorgogliamento dell'evento è considerato come metodo di flusso di eventi predefinito in tutti i browser moderni.

Esempio: evento gorgogliante in javascript

Nel seguente esempio, abbiamo aggiunto un titolo con il tag, un elemento Div con l'ID "Parentelement" e il suo elemento pulsante figlio nidificato ha l'ID "Childlement":

Bambino

Dopo aver recuperato gli elementi HTML creati usando il "documento.QuerySelector () " Metodo, aggiungeremo un ascoltatore di eventi al Div "Parentelement" e il suo pulsante nidificato "Childlement". La funzione passata nel file "AddeventListener ()" visualizzerà la stringa aggiunta in “Console.tronco d'albero()" metodo:

Esegui il programma di cui sopra nel tuo editor di codice preferito o in qualsiasi sandbox di codifica online; Tuttavia, utilizzeremo il JSbin per questo scopo:

Ora faremo clic su "Bambino" pulsante che può essere visto nella seguente uscita:

Facendo clic sul "Bambino" pulsante, il passato "funzione()" Nel metodo AddeventListener () verrà eseguito. Poi il "al clic()" metodo del "Div" L'elemento verrà invocato. Sta accadendo a causa del "Evento gorgogliante":

Nell'esempio sopra offerto, quando abbiamo fatto clic su "Bambino" pulsante, il "clic" L'evento viene passato dal pulsante con ID "Childlement" e il controllo del flusso di eventi si sposta su "documento" Nel seguente ordine:

Come fermare l'evento gorgogliante in javascript

Usando il "evento.stoppropagation () " Metodo, puoi facilmente fermare il gorgogliamento dell'evento nel tuo programma JavaScript e interrompe il viaggio di evento dal basso verso l'alto.

Esempio: fermare l'evento gorgogliante in javascript

Nell'esempio seguente, aggiungeremo il "evento.stoppropagation () " metodo a "al clic()" evento del pulsante creato con ID "Childlement". Come risultato di esso, l'interprete JavaScript non passerà l'evento all'elemento "Documento" più esterno:

Bambino

Facendo clic sul pulsante evidenziato verrà stampato solo "Clicked Child" E poi impedisce all'evento di gorgogliare:

Evento che cattura in JavaScript

Il processo in cui un evento viene catturato quando il suo flusso di controllo si sposta dall'elemento superiore all'elemento target è noto come cattura dell'evento. Sebbene i browser moderni non abbiano la capacità di consentire l'acquisizione di eventi per impostazione predefinita, è possibile eseguire questa operazione tramite il codice JavaScript.

Esempio: cattura dell'evento in JavaScript

Nel nostro programma JavaScript, prima di tutto, aggiungeremo un titolo e un "Div" elemento con id "Parentelement" e il suo elemento figlio con "Childlement" id:

Bambino

Successivamente, invocheremo il "documento.QuerySelector () " Metodo per ottenere l'elemento genitore e figlio:

Il seguente "Bambino" Il pulsante invocherà innanzitutto l'evento aggiunto all'elemento genitore. Successivamente, eseguirà l'evento allegato al bersaglio:

Nell'esempio sopra offerto, quando abbiamo fatto clic su "Bambino" pulsante, il "clic" L'evento viene passato dall'elemento genitore che è "documento", al target dell'evento specificato "Childlement" pulsante:

Come fermare l'evento catturato in javascript

Per fermare l'acquisizione di eventi, puoi utilizzare il "evento.stoppropagation () " metodo. La differenza tra fermare l'evento e il gorgogliamento dell'evento è che, in caso di gorgogliamento, abbiamo allegato l'evento "Evento.StopPropagation () "Metodo con l'evento relativo all'elemento figlio, mentre, nell'acquisizione di eventi, l'evento.Il metodo StopPropagation () viene aggiunto nell'evento genitore.

Esegui l'esempio di seguito per sapere come interrompere l'acquisizione di eventi utilizzando il codice JavaScript:

Bambino

L'output dato significa che l'acquisizione di eventi viene interrotto dopo aver eseguito l'evento associato all'elemento genitore:

Ecco la visione completa del flusso di eventi con l'evento di cattura e fasi gorgoglianti dell'evento:

Conclusione

In JavaScript, l'evento gorgogliante e l'acquisizione di eventi sono i concetti più importanti rispetto alla propagazione degli eventi. In HTML Dom, l'evento che cattura si riferisce alla propagazione degli eventi dagli elementi antenati al loro bambino. In caso di gorgogliamento, il flusso di controllo dell'evento si sposta dagli elementi del bambino agli antenati. Questo articolo ha discusso dell'evento JavaScript e cattura dell'evento. Inoltre, gli esempi relativi al gorgogliamento di eventi e alla cattura degli eventi sono dimostrati anche in questo articolo.