Documento HTML DOM addEventListener()
Esempi
Aggiungi un evento clic al documento:
document.addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
Sintassi più semplice:
document.addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
});
Altri esempi di seguito.
Definizione e utilizzo
Il addEventListener()
metodo allega un gestore di eventi al documento.
Guarda anche:
Il tutorial di EventListener del DOM HTML
Il metodo Document removeEventListener()
Sintassi
document.addEventListener(event, function, useCapture)
Parametri
Parameter | Description |
event | Required. The event name. Do not use the "on" prefix. For example, use "click" instead of "onclick". HTML DOM events are listed in Complete HTML DOM Event Object Reference. |
function | Required. The function to run when the event occurs. When the event occurs, an event object is passed to the function as the first parameter. The type of the event object depends on the specified event. For example, the "click" event belongs to the MouseEvent object. |
useCapture |
Optional. A boolean. Specifies if the event should be executed in the capturing or in the bubbling phase (default). true - The event handler is executed in the capturing phase.false - The event handler is executed in the bubbling phase.
|
Valore di ritorno
NONE |
Altri esempi
Puoi aggiungere molti listener di eventi al documento:
document.addEventListener("click", myFunction1);
document.addEventListener("click", myFunction2);
Puoi aggiungere diversi tipi di eventi:
document.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
document.addEventListener("mouseout", someOtherFunction);
Quando si passano i parametri, utilizzare una "funzione anonima" per chiamare una funzione con i parametri:
document.addEventListener("click", function() {
myFunction(p1, p2);
});
Cambia il colore di sfondo del documento:
document.addEventListener("click", function(){
document.body.style.backgroundColor = "red";
});
Utilizzando il metodo removeEventListener():
// Add an event listener
document.addEventListener("mousemove", myFunction);
// Remove event listener
document.removeEventListener("mousemove", myFunction);
Supporto browser
document.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 |