English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Oggetto JavaScript

Manuale di riferimento di JavaScript

Manuale di riferimento del DOM JS

Metodo addEventListener() dell'HTML DOM

Oggetto Document HTML DOM

document.addEventListener()Aggiunge un elaboratore di eventi al documento.

Usadocument.removeEventListener()Elimina gli elaboratori di eventi aggiunti insieme al metodo addEventListener().

Usaelement .addEventListener()Il metodo aggiunge un gestore di eventi all'elemento specificato.

Sintassi:

document.addEventListener(event, listener, useCapture)
document.addEventListener("click",　function()　{
alert("Hello World!!!");
});
Prova a vedere‹/›

Compatibilità del browser

I numeri nella tabella indicano la versione del browser che supporta il metodo addEventListener() per la prima volta:

Metodo
addEventListener()1171.09

Valore del parametro

ParametroDescrizione
event(obbligatorio) L'evento può essere qualsiasi evento JavaScript valido. Non utilizzare il prefisso "on" quando si utilizza un evento, ad esempio "click" al posto di "onclick", "mousedown" al posto di "onmousedown".
Per una lista completa di tutti gli eventi HTML DOM, consulta la nostraRiferimento agli oggetti eventi HTML DOM.
listener(obbligatorio) Può essere una funzione JavaScript che risponde all'evento. Ad esempio, una funzione che viene chiamata quando un evento si verifica.
Quando un evento si verifica, l'oggetto evento viene passato come primo parametro alla funzione. Il tipo dell'oggetto evento dipende dall'evento specificato. Ad esempio, l'evento "click" appartiene all'oggetto MouseEvent.
useCapture(opzionale) Valore booleano che specifica se l'evento viene eseguito durante la fase di capture o di bubble. Predefinito a false.
Valori possibili:

  • true-Gli eventi di gestione vengono eseguiti durante la fase di capture

  • false-Gli eventi di gestione vengono eseguiti durante la fase di bubble

Puoi trovare ulteriori informazioni sui nostriTutorial su JavaScript Event PropagationLeggi di più sulle propagazioni degli eventi

Dettagli tecnici

Valore di ritorno:Nessuno
Versione del DOM:DOM 2 livello

Altri esempi

Aggiungi l'evento di click al documento. Quando l'utente clicca su qualsiasi posizione nel documento, utilizza l'elemento <p> con id="para" per visualizzare "Hello World":

document.addEventListener("click",　function()　{
document.querySelector("#para").innerHTML = "Hello World!!!";
});
Prova a vedere‹/›

Questo esempio si riferisce a una funzione "nominata" esterna:

document.addEventListener("click", myFunc);
function myFunc() {
　　　document.body.style.backgroundColor = "coral";
}
Prova a vedere‹/›

Puoi aggiungere molti eventi al documento senza sovrascrivere quelli esistenti:

document.addEventListener("click", myFunc);
document.addEventListener("click", anotherFunc);
Prova a vedere‹/›

Puoi aggiungere diversi tipi di eventi al documento:

document.addEventListener("mouseenter",　myFunc1);
document.addEventListener("click",　myFunc2);
document.addEventListener("mouseout",　myFunc3);
Prova a vedere‹/›

Quando si passano valori di parametri, utilizzare una funzione anonima che chiama la funzione specificata con i parametri:

document.addEventListener("click",　function()　{
myFunc(x,　y);
});
Prova a vedere‹/›

Puoi anche guardare

Tutorial JavaScript:Ascoltatore di eventi

Tutorial JavaScript:Propagazione degli eventi

Riferimento HTML DOM:document.removeEventListener()

Riferimento HTML DOM:element .addEventListener()

Oggetto Document HTML DOM

Oggetto Element HTML DOMOggetto Document HTML DOM