Cosa sta acquisendo eventi in JavaScript?
In JavaScript, è possibile eseguire diversi tipi di eventi, tra cui l'acquisizione di eventi e il gorgogliamento degli eventi. Ad esempio, gli eventi che catturano propagati dall'elemento radice all'elemento figlio. Dall'altro lato, l'evento gorgogliante propaga l'elemento figlio al genitore o all'elemento radice. Per eseguire l'evento che cattura "addEventListener ()"Il metodo può essere utilizzato.
Questo post spiegherà l'acquisizione di eventi JavaScript.
Cosa sta acquisendo eventi in JavaScript?
L'acquisizione di eventi è uno scenario particolare in cui gli eventi generati iniziano dagli elementi dei genitori e si spostano verso l'elemento target/figlio che ha avviato il ciclo dell'evento. È totalmente diverso dal gorgogliamento dell'evento, in cui gli eventi si propagano verso l'esterno dagli elementi più esterni. Inoltre, la cattura degli elementi si verifica prima del gorgogliamento.
Sintassi
addEventListener (tipo, ascoltatore, usecapture)
In questa sintassi:
- "tipo"Determina il tipo di evento.
- "ascoltatore"Definisce la funzione di chiamata quando si verifica un evento specifico.
- "usecapture"Indica il valore booleano che è falso per impostazione predefinita e mostra che è nella fase gorgogliante.
Esempio 1: cattura dell'evento dell'elemento pulsante
Innanzitutto, aggiungi un "div"Container e assegna un ID con un nome particolare per catturare l'evento. Successivamente, utilizza il “"Elemento per creare un pulsante e incorporare un po 'di testo da visualizzare sul pulsante:
Inoltre, tra il ""Elemento, prima, invoca il"QuerySelector ()Metodo "e passa il"id"Per selezionare e archiviare nella variabile dichiarata:
var parentelement = documento.QuerySelector ('#main');
Quindi, accedi al pulsante utilizzando l'ID pulsante con l'aiuto di "QuerySelector ()":
VAR ChildElement = Documento.QuerySelector ('#btn');
Invocare il "addEventListener ()"E passa l'evento. Questo evento funziona quando l'utente fa clic sul pulsante. Attiverà l'elemento genitore su ciascun pulsante clic e stamperà il risultato sulla console:
parentelement.addEventListener ('click', function ()
console.log ("invoca l'elemento genitore");
,VERO);
Utilizzare il "Childelment.addEventListener ()"Metodo per invocare l'elemento figlio su ciascun pulsante Click Evento. Quindi, chiama la console.Metodo log () per visualizzare il risultato sulla console:
Childelment.addEventListener ('click', function ()
console.log ("invoche Child Element");
);
Si può osservare che l'evento è stato catturato correttamente su ciascun pulsante Click:
Esempio 2: cattura dell'evento dell'elemento di paragrafo
Per catturare l'evento dell'elemento di paragrafo, utilizzare il " Primo Secondo Terzo Definisci un "event_capturing ()"Funzionare e utilizzare il seguente codice elencato di seguito: Chiama la funzione definita da visualizzare sullo schermo: Riguarda l'evento che cattura in JavaScript. Conclusione L'acquisizione di eventi inizia a propagare l'elemento dal genitore e si sposta verso l'elemento target/figlio che ha avviato il ciclo dell'evento. Per eseguire l'evento che cattura "addEventListener ()"Il metodo può essere utilizzato. Questo post ha dimostrato il metodo per eseguire l'acquisizione di eventi.
funzione event_capturing ()
var all_p = documento.getElementsByTagName ("P");
per (var i = 0; i < All_p.length; i++)
All_p [i].addEventListener ("Click", ClickHandler, True);
funzione ClickHandler ()
Avviso (questo.getAttribute ("id") + "evento gestito correttamente");