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

JavaScript 对象

JavaScript 参考手册

JS DOM参考手册

HTML DOM addEventListener() 方法

Objeto Elemento de 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!!!");
});
Probar aquí‹/›

Compatibilidad del navegador

Los números en la tabla especifican la primera versión del navegador que admite el método addEventListener()：

Método
addEventListener()1171.09

Valores de los parámetros

ParámetrosDescripción
event（obligatorio）El evento puede ser cualquier evento JavaScript válido. Al usar eventos, no se utiliza el prefijo "on", por ejemplo, se usa "click" en lugar de " onclick" o " mousedown" en lugar de " onmousedown".
Para obtener una lista de todos los eventos HTML DOM, consulta nuestraReferencia del objeto de eventos HTML DOM。
listener（obligatorio）Puede ser una función JavaScript que responde a la ocurrencia del evento.
Cuando ocurre un evento, el objeto de evento se pasa como primer parámetro a la función. El tipo del objeto de evento depende del evento especificado. Por ejemplo, el evento "click" pertenece al objeto MouseEvent.
useCapture（opcional）Booleano que especifica si se debe ejecutar el evento en la fase de captura o burbuja. Por defecto es false.
Valores posibles：

  • true-Los gestores de eventos se ejecutan en la fase de captura

  • false-Los gestores de eventos se ejecutan en la fase de burbuja

Puedes encontrar en nuestrosEn el tutorial de JavaScript sobre propagación de eventosLee más sobre la propagación de eventos

Detalles técnicos

Valor de retorno：Ninguno
Versión del DOM：DOM 2Nivel

Más ejemplos

Este ejemplo referencia una función "nombrada" externa：

document.querySelector("button").addEventListener("click",　myFunc);
function　myFunc()　{
　　　document.body.style.backgroundColor　=　"coral";
}
Probar aquí‹/›

Puedes agregar muchos eventos a los elementos sin sobrescribir eventos existentes：

document.querySelector("button").addEventListener("click",　myFunc);
document.querySelector("button").addEventListener("click",　anotherFunc);
Probar aquí‹/›

Puedes agregar diferentes tipos de eventos a los elementos：

document.querySelector("button").addEventListener("mouseenter",　myFunc1);
document.querySelector("button").addEventListener("click", myFunc2);
document.querySelector("button").addEventListener("mouseout", myFunc3);
Probar aquí‹/›

Al pasar valores de parámetros, utilice una función anónima que llame a la función especificada con los parámetros:

var btn = document.querySelector("button");
btn.addEventListener("click", function() {
myFunc(x, y);
});
Probar aquí‹/›

Referencias relacionadas

Tutoriales de JavaScript:Escuchadores de eventos

Tutoriales de JavaScript:Propagación de eventos

Referencia de HTML DOM:elemento.removeEventListener()

Referencia de HTML DOM:document.addEventListener()

Objeto Elemento de HTML DOM

Objeto Historia de JavaScriptObjeto Elemento de HTML DOM