Elemento HTML DOM addEventListener()
Esempi
Aggiungi un evento click a un elemento <button>:
element.addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
Codice più compatto:
element.addEventListener("click", function() {
document.getElementById("demo").innerHTML = "Hello World";
});
Altri esempi di seguito.
Definizione e utilizzo
Il addEventListener()metodo allega un gestore di eventi all'elemento.
Guarda anche:
Il metodo element.removeEventListener()
Il metodo document.addEventListener()
Il metodo document.removeEventListener()
Tutorial
Sintassi
element.addEventListener(event, function, useCapture)
Parametri
| Parameter | Description |
| event | Required. The name of the event. Do not use the "on" prefix. Use "click" not "onclick". The Complete List of DOM Events. |
| function | Required. The function to run when the event occurs. |
| useCapture |
Optional (default = false).false - The handler is executed in the bubbling phase.true - The handler is executed in the capturing phase.
|
Valore di ritorno
| NESSUNO |
Altri esempi
Puoi aggiungere molti eventi allo stesso elemento:
element.addEventListener("click", myFunction1);
element.addEventListener("click", myFunction2);
Puoi aggiungere diversi eventi allo stesso elemento:
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", someOtherFunction);
element.addEventListener("mouseout", someOtherFunction);
Per passare i valori dei parametri, utilizzare una "funzione anonima":
element.addEventListener("click", function() {
myFunction(p1, p2);
});
Cambia il colore di sfondo di un elemento <button>:
element.addEventListener("click", function() {
this.style.backgroundColor = "red";
});
La differenza tra gorgogliare e catturare:
element1.addEventListener("click", myFunction, false);
element2.addEventListener("click", myFunction, true);
Rimuovere un gestore eventi:
element.addEventListener("mousemove", myFunction);
element.removeEventListener("mousemove", myFunction);
Supporto browser
element.addEventListener()è una funzionalità DOM di livello 2 (2001).
È completamente supportato in tutti i browser:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |