Come aggiungere un gestore di eventi a un elemento in JavaScript

Il gestore degli eventi, in generale, è quel pezzo di codice che controlla gli eventi. Dona il software sulle azioni che dovrebbe intraprendere quando si verifica un evento. I gestori di eventi JavaScript invocano un particolare pezzo di codice quando si verifica un evento specifico in un elemento HTML. È possibile aggiungere uno o più di un gestore di eventi a un elemento HTML che opererà su un codice rilevante sulla base del tipo di evento che si verifica all'elemento HTML. Questo articolo discute modi approfonditi per aggiungere gestori di eventi a un elemento HTML in JavaScript.

Come aggiungere un gestore di eventi a un elemento in JavaScript

JavaScript fornisce addEventListener () che consente di aggiungere un gestore di eventi a un elemento HTML. Questo metodo lega un evento a un elemento HTML, inoltre, aggiunge un gestore di eventi a un particolare elemento HTML senza sovrascrivere alcun gestore di eventi che esiste già su quell'elemento.

Sintassi

elemento.addEventListener (eventType, eventListener);

Esempio

Supponiamo di voler aggiungere un gestore di eventi che lega clic su un elemento.

Cliccami

Nell'esempio sopra, stiamo creando un pulsante usando il seguente pezzo di codice.

Cliccami

Utilizzando il metodo addEventListener (), stiamo collegando un clic di clic sul pulsante.

documento.getElementById ("pulsante").addEventListener ("Click", functionName);
funzione functionname ()
documento.getElementById ("Tutorial").InnerHtml = "Mi hai fatto clic!";

Quando si fa clic sul pulsante, verrà visualizzata una nota che ti dice che hai appena fatto clic sul pulsante. Abbiamo mostrato l'output di seguito.

Maggiori informazioni sui gestori di eventi!

1. È possibile aggiungere vari gestori di eventi o vari gestori di eventi dello stesso tipo a un particolare elemento.

Esempio

Di seguito è riportato un esempio di aggiunta di due eventi chiave a un campo di input utilizzando il metodo AddeventListener ().

Nell'esempio sopra, il seguente pezzo di codice aggiunge due eventi chiave a un campo di input.

funzione firstFunction ()
Avviso ("First KeyPress Event è successo!");

funzione secondFunction ()
Avviso ("Secondo evento KeyPress è successo!");

Quando si preme un tasto tastiera mentre all'interno del campo di input, si verificherà il primo evento di keypress.

Dopo aver fatto clic su OK nella finestra di dialogo, accadrà il secondo thyypress.

2. I gestori di eventi possono essere aggiunti anche agli oggetti DOM.

3. I gestori di eventi dedicano il comportamento degli eventi su come questi reagiscono sul gorgogliamento.

4. Per aumentare la leggibilità, JavaScript si divide dal markup HTML quando viene utilizzato il metodo AddeventListener ().

5. Durante l'utilizzo del metodo AddeventListener (), puoi anche utilizzare eventi gorgoglianti o cattura di eventi ma è totalmente facoltativo.

In caso di gorgogliare l'evento della maggior parte degli elementi interni viene gestito per primo e l'evento di più elemento esterno in seguito. Tuttavia, in caso di cattura dell'evento del maggior numero di elementi esterni viene azionato per primo e l'evento del più elemento interno in seguito.

La sintassi per l'utilizzo del gorgogliamento di eventi e della cattura degli eventi è la seguente.
elemento.addEventListener (evento, funzione, usecapture);

Nota: Nella sintassi sopra, per impostazione predefinita il valore del parametro è falso, ciò significa che si verificherà il gorgogliamento dell'evento ma se si passa il valore del parametro come vero, l'acquisizione di eventi avverrà.

Esempio

Di seguito è riportato un esempio di propagazione gorgogliante.

Questa è una propagazione gorgogliante.


Cliccami!

Nell'esempio sopra, stiamo creando a

Elemento come elemento genitore ed elemento come elemento figlio.

Questa è una propagazione gorgogliante.


Cliccami!

Utilizzando quindi utilizzato per aggiungere un evento di clic utilizzando il metodo AddeventListener () insieme alla propagazione gorgogliante.

documento.getElementById ("Button1").addEventListener ("click", function ()
Avviso ("Hai fatto clic sul pulsante!");
, false);
documento.getElementById ("para1").addEventListener ("click", function ()
Avviso ("Hai fatto clic sul paragrafo!");
, false);

Quando si esegue questo programma e prima fai clic sul pulsante, quindi la propagazione gorgogliante funzionerà l'evento clicca sul pulsante (elemento più interno) e il paragrafo (elemento più esterno) in seguito. Ecco l'output.

Ora, quando fai clic su OK, la propagazione gorgogliante eseguirà l'evento click nel paragrafo.

Usando lo stesso esempio, se si passa il valore del parametro come vero, si verificherà la propagazione.

Questa è una propagazione gorgogliante.


Cliccami!

Se si fa clic sull'elemento figlio (pulsante) prima, l'acquisizione della propagazione funzionerà Fare clic sull'evento al paragrafo (elemento più esterno) e pulsante (elemento più interno) (elemento più interno)). Abbiamo mostrato l'output di seguito.

Dopo aver fatto clic su OK, fare clic sull'evento sull'elemento.

6. È anche possibile rimuovere un gestore di eventi utilizzando il metodo RemoveEventListener ().

Conclusione

JavaScript fornisce il metodo addEventListener () che consente di legare un gestore di eventi a un elemento. Puoi allegare vari gestori di eventi dello stesso tipo a un particolare elemento, inoltre, oltre agli elementi HTML puoi anche aggiungere gestori di eventi agli oggetti DOM. È inoltre possibile aggiungere propagazione gorgogliante e catturare la propagazione usando il metodo AddeventListener (). Questo articolo discute in dettaglio, approcci per l'aggiunta di gestori di eventi a un elemento che utilizza JavaScript insieme a esempi adeguati.