Método addEventListener() del DOM HTML

Definición y uso

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

Ejemplo

Ejemplo 1

Añade un evento click al elemento <button>:

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

Intente hacerlo usted mismo

Ejemplo 2

Código más compacto:

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

Intente hacerlo usted mismo

Puedes encontrar más ejemplos en la parte inferior de la página.

Sintaxis

element.addEventListener(type, function, useCapture)

Parámetros

Parámetros Descripción
type

Necesario. El nombre del evento.

No uses el prefijo "on".

Usa "click" en lugar de "onclick".


Lista completa de eventos DOM
function Necesario. La función que se ejecuta cuando ocurre el evento.
useCapture

Opcional (por defecto = false).

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

Valor de retorno

Ninguno.

Detalles técnicos

Este método agrega la función observadora de eventos especificada a la colección de observadores de eventos del nodo actual para manejar el tipo de evento especificado. type del evento. Si useCapture Está en true, el observador se registra como observador de eventos de captura. Si useCapture Está en false, se registra como observador de eventos de eventos normales.

addEventListener() puede ser llamada varias veces, registrando 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 observadora de eventos se registra con el mismo type Y useCapture Si se registran dos veces con el mismo parámetro, la segunda registración se ignorará. Si se está procesando un evento en un nodo y en ese nodo se registra un nuevo observador de eventos, no se llamará al nuevo observador de eventos para ese evento.

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

Este método también está Document Y Window Están definidos en el objeto y funcionan de manera similar.

Más ejemplos

Ejemplo 3

Puedes agregar muchos eventos al mismo elemento:

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

Intente hacerlo usted mismo

Ejemplo 4

Puedes agregar diferentes eventos al mismo elemento:

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

Intente hacerlo usted mismo

Ejemplo 5

Para pasar valores de parámetros, utilice "función anónima":

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

Intente hacerlo usted mismo

Ejemplo 6

Cambiar el color de fondo del elemento <button>:

element.addEventListener("click", function() {
  this.style.backgroundColor = "red";
});

Intente hacerlo usted mismo

Ejemplo 7

Diferencias entre burbuja y captura:

element1.addEventListener("click", myFunction, false); element2.addEventListener("click", myFunction, true);

Intente hacerlo usted mismo

Ejemplo 8

Eliminar gestor de eventos:

element.addEventListener("mousemove", myFunction);
element.removeEventListener("mousemove", myFunction);

Intente hacerlo usted mismo

Compatibilidad del navegador

element.addEventListener() Es una función 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