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

Objeto de JavaScript

Manual de referencia de JavaScript

Manual de referencia del JS DOM

Método addEventListener() del HTML DOM

Objeto Documento de HTML DOM

document.addEventListener()Método para adjuntar programas de manejo de eventos al documento.

Usadocument.removeEventListener()Método para eliminar los programas de manejo de eventos adjuntos al método addEventListener().

Usaelemento .addEventListener()El método adjunta un gestor de eventos al elemento especificado.

Sintaxis:

document.addEventListener(event, listener, useCapture)
document.addEventListener("click",　function()　{
alert("Hello World!!!");
});
Prueba 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 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", "mousedown" en lugar de "onmousedown".
Para una lista de todos los eventos HTML DOM, consulta nuestraReferencia de objetos de eventos HTML DOM.
listener(obligatorio) Puede ser una función JavaScript que responde al evento ocurrido.
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) Valor booleano que especifica si se ejecuta en la fase de captura o de burbuja. El valor predeterminado 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

Agrega un evento de clic al documento. Cuando el usuario haga clic en cualquier lugar del documento, usa el elemento <p> con id="para" para mostrar "Hello World":

document.addEventListener("click",　function()　{
document.querySelector("#para").innerHTML = "Hello World!!!";
});
Prueba aquí‹/›

Este ejemplo hace referencia a una función "nombrada" externa:

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

Puedes agregar muchos eventos al documento sin sobrescribir eventos existentes:

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

Puede agregar diferentes tipos de eventos al documento:

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

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

document.addEventListener("click",　function()　{
myFunc(x,　y);
});
Prueba aquí‹/›

También puedes ver

Tutoriales de JavaScript:Escuchadores de eventos

Tutoriales de JavaScript:Difusión de eventos

Referencia de HTML DOM:document.removeEventListener()

Referencia de HTML DOM:elemento .addEventListener()

Objeto Documento de HTML DOM

Objeto Elemento de HTML DOMObjeto Documento de HTML DOM