Metodo dell'ascoltatore di eventi DOM in JavaScript

Puoi aggiungere l'ascoltatore di eventi agli elementi Dom HTML con l'aiuto del addEventListener () metodo. Il metodo ADDEventListener () consente di controllare la reazione per l'evento corrispondente. Il javascript è isolato dal testo HTML quando si utilizza il metodo AddeventListener (), rendendo facile da comprendere e consentendoti di aggiungere gli ascoltatori di eventi anche se non si controlla il markup HTML.

Questo articolo discuterà del Dom Event Listener Metodo in JavaScript. Spiegheremo l'uso del metodo dell'ascoltatore di eventi DOM per l'aggiunta di gestori singoli e più agli elementi HTML. Inoltre, saranno dimostrati anche esempi relativi al gorgogliamento di eventi e alla cattura degli eventi. Quindi iniziamo!

Metodo dell'ascoltatore di eventi DOM in JavaScript

Come programmatore JavaScript, è possibile utilizzare il metodo Dom AddeventListener () per l'aggiunta di un listener di eventi su qualsiasi oggetto HTM come oggetti finestra, elementi HTML, documento HTML o oggetto XMLHTTPREQUEST.

Esiste un altro "SU" Proprietà JavaScript utilizzata per lo stesso scopo; Tuttavia, non è molto utile rispetto al metodo addEventListener () perché il metodo DOM addEventListener () consente di aggiungere più ascoltatori di eventi su un oggetto finestra o elemento HTML.

Sintassi del metodo addEventListener ()

oggetto.addEventListener (evento, funzione, usecapture);

Qui, il primo parametro, "evento" viene aggiunto per specificare l'evento per il quale si desidera aggiungere il gestore degli eventi; Il secondo parametro, "funzione" invoca la funzione che verrà eseguita quando si verifica l'evento specificato. Il terzo parametro è facoltativo; dove devi aggiungere entrambi"Cattura dell'evento" O "Evento gorgogliante".

Esempio 1: utilizzando il metodo del listener Evener Dom per l'aggiunta di un gestore di eventi in JavaScript

Questo esempio mostrerà la procedura per l'aggiunta di un metodo di ascoltatore di eventi DOM per l'evento "clicca" del mouse in JavaScript. In primo luogo, aggiungeremo un'intestazione con il

tag, un paragrafo con il

tag e un pulsante utilizzando il tag:

Metodo dell'ascoltatore di eventi DOM in JavaScript

Questo programma JavaScript ha utilizzato il metodo AddeventListener ()

Abbiamo anche aggiunto un ID "Button1" per noi "Cliccami" pulsante:

Cliccami

Il metodo getElementByID verrà invocato per trovare e ottenere il pulsante con "Button1" id. Dopodiché, il "AddeventListener ()" Il metodo aggiungerà un file "clic" evento che attiverà il "DisplayDate ()" 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:

Dopo aver ottenuto l'output, fare clic su "Cliccami" Pulsante per controllare l'ora e la data corrente:

Esempio 2: Utilizzo del metodo del listener Evener DOM per l'aggiunta di più gestori di eventi in JavaScript

JavaScript offre anche la funzionalità per aggiungere più gestori di eventi per lo stesso oggetto. Per dimostrare la sua procedura, abbiamo scritto il seguente programma JavaScript con una rotta, un paragrafo e un pulsante con "Button1" id. Si noti che aggiungeremo più gestori di eventi per il "pulsante" Elemento html:

Aggiungi un gestore di eventi in JavaScript

Questo programma JavaScript ha utilizzato il metodo AddeventListener ()

Cliccami

Nel prossimo passaggio, faremo un "UN" oggetto che troverà e ottengerà il pulsante con "Button1" Id invocando il documento.Metodo getElementById ():

Colpire il "Cliccami" pulsante e ricevi due avvisi sul browser, uno dopo l'altro:

Esempio 3: utilizzando il metodo del listener di eventi DOM per l'aggiunta del gestore di eventi all'oggetto finestra in JavaScript

Nel seguente esempio, stiamo aggiungendo il metodo AddeventListener () al "finestra" oggetto. Il metodo aggiunto addEventListener () verrà attivato quando un utente esegue il "Mousedown" azione:

JavaScript addEventListener ()

Questo esempio utilizza il metodo addEventListener () sull'oggetto della finestra.

Passeremo anche un "evento" Oggetto al metodo AddeventListener (). IL "evento" L'oggetto comprende tutte le informazioni relative al file mouseown evento:

L'esecuzione del programma JavaScript di cui sopra mostrerà il seguente output:

Ora, premere il "Sinistra" Pulsante mouse sull'elemento selezionato e vedrai il seguente avviso:

Evento che gorgoglia in JavaScript

In JavaScript, l'evento gorgogliamento è un evento che bolle dal bersaglio o dagli elementi più profondi ai suoi genitori, quindi segue l'approccio in basso a superiore e sposta il flusso di controllo 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 assegnato gli elementi HTML creati utilizzando il "documento.QuerySelector () " Metodo, aggiungeremo un ascoltatore di eventi a entrambi Div "Parentelement" ed è nidificato "Childlement" pulsante. La funzione passata nel file "AddeventListener ()" visualizzerà la stringa aggiunta in “Console.tronco d'albero()" metodo:

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. Tutto ciò accade 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:

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 o più esterno è 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 all'obiettivo dell'evento:

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:

Conclusione

Utilizzando il metodo Dom addEventListener (), è possibile aggiungere un ascoltatore di eventi all'oggetto finestra e agli elementi HTML. Senza sovrascrivere i gestori di eventi esistenti, il metodo JavaScript ADDEventListener () assegna un gestore di eventi all'oggetto specifico. Inoltre, un oggetto a finestra singola può avere anche più gestori di eventi. Questo articolo ha discusso del metodo dell'ascoltatore di eventi DOM in JavaScript. Abbiamo anche spiegato l'utilizzo del metodo dell'ascoltatore di eventi DOM per l'aggiunta di gestori singoli e multipli agli elementi HTML. Inoltre, vengono dimostrati anche esempi relativi al gorgogliamento di eventi e alla cattura degli eventi.