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.
Cliccami document.getElementById('btn').addEventListener('click', fun); function fun() { document.getElementById('para').innerHTML = 'Ciao mondo' + '' + 'Benvenuti su javaTpoint.com'; }Provalo adesso
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.
Cliccami function fun() { alert('Benvenuti su javaTpoint.com'); } function fun1() { document.getElementById('para').innerHTML = 'Questa è la seconda funzione'; } function fun2() { document.getElementById('para1').innerHTML = 'Questa è la terza funzione'; } var mybtn = document.getElementById('btn'); mybtn.addEventListener('click', divertimento); mybtn.addEventListener('click', fun1); mybtn.addEventListener('click', fun2);Provalo adessoProduzione
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.
Cliccami function fun() { btn.style.width = '50px'; btn.style.height = '50px'; btn.style. background = 'giallo'; btn.style.color = 'blu'; } function fun1() { document.getElementById('para').innerHTML = 'Questa è la seconda funzione'; } funzione fun2() { btn.style.width = ''; btn.style.height = ''; btn.style. background = ''; btn.style.color = ''; } var miobtn = document.getElementById('btn'); mybtn.addEventListener('mouseover', divertente); mybtn.addEventListener('click', fun1); mybtn.addEventListener('mouseout', fun2);Provalo adessoProduzione
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('d1').addEventListener('dblclick', function() {alert('You have double clicked on div element')}, false); document.getElementById('s1').addEventListener('dblclick', function() {alert('You have double clicked on span element')}, false); document.getElementById('d2').addEventListener('dblclick', function() {alert('You have double clicked on div element')}, true); document.getElementById('s2').addEventListener('dblclick', function() {alert('You have double clicked on span element')}, true);Provalo adesso
Produzione
Dobbiamo fare doppio clic sugli elementi specifici per vedere l'effetto.