JavaScript HTML DOM Escuchadores de Eventos

Método addEventListener()

Ejemplo

Añade un observador de eventos que se activa cuando el usuario hace clic en el botón:

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

Prueba por tu cuenta

addEventListener() El método asigna un programador de eventos específico a un elemento específico.

addEventListener() El método adjunta programadores de eventos a un elemento sin sobrescribir los programadores de eventos existentes.

Puedes agregar múltiples programadores de eventos a un elemento.

Puedes agregar varios administradores de eventos del mismo tipo a un elemento, por ejemplo, dos eventos "click".

Puedes agregar administradores de eventos a cualquier objeto DOM, no solo a elementos HTML, como el objeto window.

addEventListener() El método nos hace más fáciles de controlar cómo los eventos responden a la burbujeo.

Al usar addEventListener() El método, JavaScript y el marcado HTML están separados para una mayor legibilidad; incluso cuando no se controla el marcado HTML, se permite agregar oyentes de eventos.

Puedes usar removeEventListener() Este método facilita la eliminación de oyentes de eventos.

Sintaxis

element.addEventListener(event, function, useCapture);

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

El segundo parámetro es la función que llamamos cuando ocurre el evento.

El tercer parámetro es un valor booleano que especifica si se debe usar propagación de eventos o captura de eventos. Este parámetro es opcional.

Nota:No utilices el prefijo "on" para los eventos; usa "click" en lugar de "onclick".

Agregar un administrador de eventos a un elemento

Ejemplo

Muestra "¡Hola Mundo!" cuando el usuario hace clic en un elemento:

element.addEventListener("click", function(){ alert("¡Hola Mundo!"); });

Prueba por tu cuenta

También puedes referirte a funciones "nombradas" externas:

Ejemplo

Muestra "¡Hola Mundo!" cuando el usuario hace clic en un elemento:

element.addEventListener("click", myFunction);
function myFunction() {
    alert ("¡Hola Mundo!");
}

Prueba por tu cuenta

Agregar varios administradores de eventos al mismo elemento

addEventListener() Este método te permite agregar varios eventos al mismo elemento sin sobrescribir los eventos existentes:

Ejemplo

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

Prueba por tu cuenta

Puedes agregar diferentes tipos de eventos al mismo elemento:

Ejemplo

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

Prueba por tu cuenta

Agregar un administrador de eventos al objeto Window

addEventListener() Permite que agregues un oyente de eventos a cualquier objeto DOM HTML, como un elemento HTML, un objeto HTML, el objeto window u otros objetos que soporten eventos, como el objeto XMLHttpRequest.

Ejemplo

Añadir un oyente de eventos que se activa cuando el usuario ajusta el tamaño de la ventana:

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

Prueba por tu cuenta

Transmitir parámetros

Cuando se pasan valores de parámetro, utilice la "función anónima" en forma de parámetro para llamar a la función especificada:

Ejemplo

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

Prueba por tu cuenta

¿Es propagación de burbuja o captura de eventos?

En el HTML DOM hay dos métodos de propagación de eventos: burbuja y captura.

La propagación del evento es una manera de definir el orden de los elementos cuando ocurre un evento. Si hay un elemento <p> dentro de un <div>, y el usuario hace clic en el elemento <p>, ¿cuál debería procesarse primero el evento de clic del elemento?

En la burbuja, el elemento más interno del evento se procesa primero, seguido de los más externos: primero se procesa el evento de clic del elemento <p>, luego el del elemento <div>.

En la captura, el elemento más externo del evento se procesa primero, seguido de los más internos: primero se procesa el evento de clic del elemento <div>, luego el del elemento <p>.

En el método addEventListener(), puedes especificar el tipo de propagación utilizando el parámetro "useCapture":

addEventListener(event, function, useCapture);

El valor predeterminado es falseentonces se usará la propagación de burbuja, si el valor se establece en trueentonces el evento se utiliza para la propagación de captura.

Ejemplo

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

Prueba por tu cuenta

método removeEventListener()

removeEventListener() El método eliminará los programas de manejo de eventos que se hayan agregado a través del addEventListener() Programas de manejo de eventos adjuntos al método:

Ejemplo

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

Prueba por tu cuenta

Compatibilidad del navegador

Los números en la tabla especifican la versión del navegador que admite completamente estos métodos.

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

Notas:IE 8, Opera 6.0 y versiones anteriores no lo soportan addEventListener() y removeEventListener() Método. Sin embargo, para estas versiones especiales de navegador, puedes usar attachEvent()}} Método agregar un administrador de eventos a un elemento, y luego detachEvent() Método eliminar:

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

Ejemplo

Solución de problemas entre navegadores:

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

Prueba por tu cuenta

Manual de referencia del objeto evento DOM HTML

Para obtener una lista completa de todos los eventos DOM HTML, visite nuestra Manual de referencia del objeto evento DOM HTML.