JavaScript HTML DOM EventListener

Método addEventListener()

Ejemplo

Activar el evento de escucha cuando el usuario hace clic en el botón:

document.getElementById("myBtn").addEventListener("click", displayDate);

Pruébalo »

El método addEventListener() se utiliza para añadir controladores de eventos a un elemento especificado.

Los controladores de eventos añadidos con el método addEventListener() no sobrescriben los controladores de eventos existentes.

Puedes añadir múltiples controladores de eventos a un elemento.

Puedes añadir múltiples controladores de eventos del mismo tipo a un mismo elemento, por ejemplo: dos eventos "click".

Puedes añadir listeners de eventos a cualquier objeto DOM, no solo a elementos HTML, como el objeto window.

El método addEventListener() permite controlar los eventos (burbujeo y captura) de manera más sencilla.

Cuando usas el método addEventListener(), JavaScript se separa del marcado HTML, lo que mejora la legibilidad y permite añadir listeners de eventos incluso sin controlar el marcado HTML.

Puedes usar el método removeEventListener() para eliminar el listener de eventos.

Sintaxis

element.addEventListener(event, function, useCapture);

El primer parámetro es el tipo de evento (como "click" o "mousedown").

El segundo parámetro es la función que se llamará cuando se active el evento.

El tercer parámetro es un valor booleano que describe si el evento es de burbujeo o de captura. Este parámetro es opcional.

Note Nota: No uses el prefijo "on". Por ejemplo, usa "click" en lugar de "onclick".

Añadir un controlador de eventos al elemento original

Ejemplo

Muestra "Hello World!" cuando el usuario hace clic en el elemento:

element.addEventListener("click", function(){ alert("Hello World!"); });

Pruébalo »

Puedes usar el nombre de la función para referenciar una función externa:

Ejemplo

Muestra "Hello World!" cuando el usuario hace clic en el elemento:

element.addEventListener("click", myFunction);

function myFunction() {
    alert ("Hello World!");
}

Pruébalo »

Añadir múltiples controladores de eventos al mismo elemento

El método addEventListener() permite añadir múltiples eventos al mismo elemento sin sobrescribir los eventos existentes:

Ejemplo

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

Pruébalo »

Puedes añadir diferentes tipos de eventos al mismo elemento:

Ejemplo

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

Pruébalo »

Añadir un controlador de eventos al objeto Window

El método addEventListener() te permite añadir listeners de eventos a objetos HTML DOM, como elementos HTML, documentos HTML, el objeto window, u otros objetos de eventos compatibles, como el objeto xmlHttpRequest.

Ejemplo

Añadir un listener de eventos cuando el usuario redimensiona la ventana:

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});

Pruébalo »

Pasar parámetros

Cuando se pasan valores de parámetros, usa una "función anónima" para llamar a una función con parámetros:

Ejemplo

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

Pruébalo »

¿Burbujeo de eventos o captura de eventos?

Hay dos formas de propagación de eventos: burbujeo y captura.

La propagación de eventos define el orden en que se activan los eventos de los elementos. Si insertas un elemento <p> dentro de un elemento <div> y el usuario hace clic en el elemento <p>, ¿qué elemento se activa primero con el evento "click"?

EnBurbujeoEn el burbujeo, el evento del elemento interno se activa primero y luego el del elemento externo, es decir: el evento de clic del elemento <p> se activa primero, y luego se activa el evento de clic del elemento <div>.

EnCapturaEn la captura, el evento del elemento externo se activa primero y luego el del elemento interno, es decir: el evento de clic del elemento <div> se activa primero, y luego se activa el evento de clic del elemento <p>.

El método addEventListener() permite especificar el parámetro "useCapture" para configurar el tipo de propagación:

addEventListener(event, function, useCapture);

El valor predeterminado es false, es decir, propagación por burbujeo. Cuando el valor es true, el evento usa propagación por captura.

Ejemplo

document.getElementById("myDiv").addEventListener("click", myFunction, true);

Pruébalo »

Método removeEventListener()

El método removeEventListener() elimina los controladores de eventos añadidos por el método addEventListener():

Ejemplo

element.removeEventListener("mousemove", myFunction);

Pruébalo »

Soporte del navegador

Los números en la tabla indican la versión del primer navegador que soporta este método.

Método
addEventListener() 1.0 9.0 1.0 1.0 7.0
removeEventListener() 1.0 9.0 1.0 1.0 7.0

Nota:IE 8 y versiones anteriores de IE, así como Opera 7.0 y versiones anteriores, no soportan los métodos addEventListener() y removeEventListener(). Sin embargo, para estas versiones de navegadores se puede usar el método detachEvent() para eliminar controladores de eventos:

element.attachEvent(event, function);
element.detachEvent(event, function);

Ejemplo

Solución para compatibilidad entre navegadores:

var x = document.getElementById("myBtn");
if (x.addEventListener) { // Todos los navegadores principales, excepto IE 8 y versiones anteriores
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) { // IE 8 y versiones anteriores
    x.attachEvent("onclick", myFunction);
}

Pruébalo »

Manual de referencia del objeto de eventos HTML DOM

Todos los eventos HTML DOM, puedes consultar nuestro completoManual de referencia del objeto de eventos HTML DOM。 Otras extensiones