Método addEventListener() del Documento de DOM HTML

Definición y uso

addEventListener() El método adjunta un gestor de eventos a un documento.

Ejemplo

Ejemplo 1

Agregar evento de clic al documento:

document.addEventListener("click", myFunction);
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}

Pruebe usted mismo

Sintaxis más simple:

document.addEventListener("click", function(){
  document.getElementById("demo").innerHTML = "Hello World";
});

Pruebe usted mismo

Ejemplo 2

Puede agregar varios administradores de eventos al documento:

document.addEventListener("click", myFunction1);
document.addEventListener("click", myFunction2);

Pruebe usted mismo

Ejemplo 3

Puede agregar diferentes tipos de eventos:

document.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
document.addEventListener("mouseout", someOtherFunction);

Pruebe usted mismo

Ejemplo 4

Al pasar parámetros, utilice una "función anónima" para llamar a una función con parámetros:

document.addEventListener("click", function() {
  myFunction(p1, p2);
});

Pruebe usted mismo

Ejemplo 5

Cambiar el color de fondo del documento:

document.addEventListener("click", function(){
  document.body.style.backgroundColor = "red";
});

Pruebe usted mismo

Ejemplo 6

Utilice el método removeEventListener():

// Añadir administrador de eventos
document.addEventListener("mousemove", myFunction);
// Eliminar el administrador de eventos
document.removeEventListener("mousemove", myFunction);

Pruebe usted mismo

Sintaxis

document.addEventListener(type, function, captura)

Parámetros

Parámetros Descripción
type

Obligatorio. Nombre del evento.

No utilice el prefijo "on".

Utilice "click" en lugar de "onclick".

Todos los eventos DOM HTML se enumeran en:

Manual de Referencia de Objetos de Eventos DOM HTML
function

Obligatorio. Función que se ejecuta cuando ocurre un evento.

Cuando ocurre un evento, se pasa el objeto de evento 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.
captura

Opcional (por defecto = false).

  • true - El gestor se ejecuta en la fase de captura
  • false - El gestor se ejecuta en la fase de burbuja

Valor de retorno

Ninguno.

Detalles técnicos

Este método añade la función de oyente de eventos especificada a la colección de oyentes de eventos del nodo actual para manejar eventos del tipo especificado type. Si captura está en true, el oyente de eventos se registra como oyente de eventos de captura. Si captura está en false, se registra como oyente de eventos de eventos normales.

addEventListener() puede ser llamada varias veces, se pueden registrar varios manejadores de eventos del mismo tipo en el mismo nodo. Pero hay que tener en cuenta que DOM no puede determinar el orden en que se llaman varios manejadores de eventos.

Si una función oyente de eventos se registra en el mismo nodo con el mismo type y captura se registren dos veces con el mismo parámetro, la segunda registro se ignorará. Si se está procesando un evento en un nodo y en ese nodo se registra un nuevo oyente de eventos, no se llamará al nuevo oyente de eventos para ese evento.

Cuando se Node.cloneNode() Método o Document.importNode() Al copiar un nodo Documento, no se copian los oyentes de eventos registrados en el nodo original.

Este método también se define en los objetos Document y Window, y funciona de manera similar.

Compatibilidad del navegador

document.addEventListener es una característica de DOM Level 2 (2001).

Todos los navegadores lo soportan completamente:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Soporte 9-11 Soporte Soporte Soporte Soporte

Páginas relacionadas

Métodos de elemento

Método addEventListener()

Método removeEventListener()

Métodos de documento

Método addEventListener()

Método removeEventListener()

Tutoriales

HTML DOM EventListener

Lista completa de eventos DOM