IL aggiungiEventListener() Il metodo viene utilizzato per associare un gestore eventi a un particolare elemento. Non sovrascrive i gestori eventi esistenti. Si dice che gli eventi siano una parte essenziale di JavaScript. Una pagina web risponde in base all'evento che si è verificato. Gli eventi possono essere generati dall'utente o generati dalle API. Un ascoltatore di eventi è una procedura JavaScript che attende il verificarsi di un evento.

Il metodo addEventListener() è una funzione integrata di JavaScript . Possiamo aggiungere più gestori di eventi a un particolare elemento senza sovrascrivere i gestori di eventi esistenti.

Sintassi

 element.addEventListener(event, function, useCapture); 

Sebbene abbia tre parametri, i parametri evento E funzione sono ampiamente utilizzati. La definizione del terzo parametro è facoltativa. I valori di questa funzione sono definiti come segue.

Valori dei parametri

evento: È un parametro obbligatorio. Può essere definito come una stringa che specifica il nome dell'evento.

Nota: non utilizzare alcun prefisso come 'on' con il valore del parametro. Ad esempio, utilizza 'click' anziché 'onclick'.

funzione: È anche un parametro obbligatorio. È un Funzione JavaScript che risponde all'evento che si verifica.

formattatore di stringhe

utilizzareCapture: È un parametro facoltativo. È un valore di tipo booleano che specifica se l'evento viene eseguito in fase di bubbling o di cattura. I suoi possibili valori sono VERO E falso . Quando è impostato su true, il gestore eventi viene eseguito nella fase di acquisizione. Quando è impostato su false, il gestore viene eseguito nella fase di bubbling. Il suo valore predefinito è falso .

Vediamo alcune illustrazioni sull'utilizzo del metodo addEventListener().

Esempio

È un semplice esempio di utilizzo del metodo addEventListener(). Dobbiamo fare clic sul dato Pulsante HTML per vedere l'effetto.

Esempio del metodo addEventListener().

np.dove

Fare clic sul pulsante seguente per vedere l'effetto.

Produzione

Dopo aver fatto clic sul pulsante HTML indicato, l'output sarà:

Ora, nel prossimo esempio vedremo come aggiungere tanti eventi allo stesso elemento senza sovrascrivere gli eventi esistenti.

Esempio

In questo esempio, stiamo aggiungendo più eventi allo stesso elemento.

Questo è un esempio di aggiunta di più eventi allo stesso elemento.

Fare clic sul pulsante seguente per vedere l'effetto.

Produzione

Ora, quando facciamo clic sul pulsante, verrà visualizzato un avviso. Dopo aver fatto clic sul pulsante HTML indicato, l'output sarà:

riga contro colonna

Quando usciamo dall'avviso, l'output è:

Esempio

In questo esempio, stiamo aggiungendo più eventi di tipo diverso allo stesso elemento.

Questo è un esempio di aggiunta di più eventi di tipo diverso allo stesso elemento.

Fare clic sul pulsante seguente per vedere l'effetto.

Produzione

Quando spostiamo il cursore sul pulsante, l'output sarà:

Dopo aver fatto clic sul pulsante e lasciato il cursore, l'output sarà:

Evento bubbling o acquisizione di eventi

Ora comprendiamo l'uso del terzo parametro di addEventListener() di JavaScript, ovvero utilizzareCapture.

ordine per sql casuale

Nel DOM HTML, Ribollente E Catturare sono le due modalità di propagazione degli eventi. Possiamo comprendere questi modi facendo un esempio.

Supponiamo di avere un elemento div e un elemento paragrafo al suo interno e stiamo applicando il file 'clic' evento a entrambi utilizzando il file aggiungiEventListener() metodo. Ora la domanda è se si fa clic sull'elemento paragrafo, quale evento clic dell'elemento viene gestito per primo.

Quindi, dentro Ribollente, l'evento dell'elemento paragrafo viene gestito per primo, quindi viene gestito l'evento dell'elemento div. Ciò significa che nel bubbling, l'evento dell'elemento interno viene gestito per primo, quindi verrà gestito l'evento dell'elemento più esterno.

In Catturare l'evento dell'elemento div viene gestito per primo, quindi viene gestito l'evento dell'elemento paragrafo. Ciò significa che durante l'acquisizione viene gestito prima l'evento dell'elemento esterno, quindi verrà gestito l'evento dell'elemento più interno.

cos'è l'uovo di pasqua android

 addEventListener(event, function, useCapture); 

Possiamo specificare la propagazione utilizzando il metodo utilizzareCapture parametro. Quando è impostato su false (che è il suo valore predefinito), l'evento utilizza la propagazione del bubbling e quando è impostato su true, avviene la propagazione di acquisizione.

Possiamo capire il ribollente E catturare utilizzando un'illustrazione.

Esempio

In questo esempio, ci sono due elementi div. Possiamo vedere l'effetto gorgogliamento sul primo elemento div e l'effetto di cattura sul secondo elemento div.

Quando facciamo doppio clic sull'elemento span del primo elemento div, l'evento dell'elemento span viene gestito prima dell'elemento div. È chiamato ribollente .

Ma quando facciamo doppio clic sull'elemento span del secondo elemento div, l'evento dell'elemento div viene gestito prima dell'elemento span. È chiamato catturare .

 div{ background-color: lightblue; border: 2px solid red; font-size: 25px; text-align: center; } span{ border: 2px solid blue; } This is a div element. <br> <br> <span id="s2"> This is a span element. </span> document.getElementById(&apos;d1&apos;).addEventListener(&apos;dblclick&apos;, function() {alert(&apos;You have double clicked on div element&apos;)}, false); document.getElementById(&apos;s1&apos;).addEventListener(&apos;dblclick&apos;, function() {alert(&apos;You have double clicked on span element&apos;)}, false); document.getElementById(&apos;d2&apos;).addEventListener(&apos;dblclick&apos;, function() {alert(&apos;You have double clicked on div element&apos;)}, true); document.getElementById(&apos;s2&apos;).addEventListener(&apos;dblclick&apos;, function() {alert(&apos;You have double clicked on span element&apos;)}, true); 

Produzione

Dobbiamo fare doppio clic sugli elementi specifici per vedere l'effetto.