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

JavaScript 对象

JavaScript 参考手册

JS DOM参考手册

HTML DOM addEventListener() 方法

Oggetto Elemento HTML DOM

element.addEventListener()方法将事件处理程序附加到指定的元素。

使用elemento.removeEventListener()方法删除与addEventListener()方法一起附加的事件处理程序。

使用document.addEventListener()方法将事件处理程序附加到文档。

语法：

element.addEventListener(event, listener, useCapture)
var x = document.querySelector("button");
x.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 utilizzare "click" al posto di "onclick" o "mousedown" al posto di "onmousedown".
Per una lista completa di tutti gli eventi HTML DOM, consulta la nostraRiferimento all'oggetto HTML DOM eventi
（obbligatorio）Può essere una funzione JavaScript che risponde all'evento.
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 cattura o di bolle. Il valore predefinito è false.
Valori possibili:

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

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

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

Dettagli tecnici

Valore di ritorno:Nessuno
Versione DOM:DOM 2 livello

Più esempi

Questo esempio fa riferimento a una funzione "nomina" esterna:

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

Puoi aggiungere molti eventi agli elementi senza sovrascrivere quelli esistenti:

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

Puoi aggiungere diversi tipi di eventi agli elementi:

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

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

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

Riferimenti correlati

Corso JavaScript:Ascoltatore di eventi

Corso JavaScript:Propagazione degli eventi

Manuale di riferimento HTML DOMelemento.removeEventListener()

Manuale di riferimento HTML DOMdocument.addEventListener()

Oggetto Elemento HTML DOM

Oggetto History JavaScriptOggetto Elemento HTML DOM