Escucha de eventos DOM de JavaScript

Tabla de contenido

El método addEventListener()

Ejemplo

Agregue un detector de eventos que se active cuando un usuario hace clic en un botón:

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to attach a click event to a button.</p>

<button id="myBtn">Try it</button>

<p id="demo"></p>

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

function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}
</script>

</body>
</html>

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

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

Puede agregar muchos controladores de eventos a un elemento.

Puede agregar muchos controladores de eventos del mismo tipo a un elemento, es decir, dos eventos de "clic".

Puede agregar detectores de eventos a cualquier objeto DOM, no solo a elementos HTML. es decir, el objeto de ventana.

El método addEventListener() facilita el control de cómo reacciona el evento al burbujeo.

Cuando se utiliza el método addEventListener(), el JavaScript se separa del marcado HTML para mejorar la legibilidad. y le permite agregar detectores de eventos incluso cuando no controla el marcado HTML.

Puede eliminar fácilmente un detector de eventos utilizando el método removeEventListener().

Sintaxis

element.addEventListener(event, function, useCapture);

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

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

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

Tenga en cuenta que no utiliza el prefijo "on" para el evento; utilice "hacer clic" en lugar de "onclick".

Agregar un controlador de eventos a un elemento

Ejemplo

Alerta "¡Hola mundo!" cuando el usuario hace clic en un elemento:

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to attach a click event to a button.</p>

<button id="myBtn">Try it</button>

<script>
document.getElementById("myBtn").addEventListener("click", function() {
  alert("Hello World!");
});
</script>

</body>
</html>

También puede hacer referencia a una función externa "con nombre":

Ejemplo

Alerta "¡Hola mundo!" cuando el usuario hace clic en un elemento:

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to execute a function when a user clicks on a button.</p>

<button id="myBtn">Try it</button>

<script>
document.getElementById("myBtn").addEventListener("click", myFunction);

function myFunction() {
  alert ("Hello World!");
}
</script>

</body>
</html>

Agregue muchos controladores de eventos al mismo elemento

El método addEventListener() le permite agregar muchos eventos al mismo elemento, sin sobrescribir eventos existentes:

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to add two click events to the same button.</p>

<button id="myBtn">Try it</button>

<script>
var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);

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

function someOtherFunction() {
  alert ("This function was also executed!");
}
</script>

</body>
</html>

Puedes agregar eventos de diferentes tipos a un mismo elemento:

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to add many events on the same button.</p>

<button id="myBtn">Try it</button>

<p id="demo"></p>

<script>
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);

function myFunction() {
  document.getElementById("demo").innerHTML += "Moused over!<br>";
}

function mySecondFunction() {
  document.getElementById("demo").innerHTML += "Clicked!<br>";
}

function myThirdFunction() {
  document.getElementById("demo").innerHTML += "Moused out!<br>";
}
</script>

</body>
</html>

Agregar un controlador de eventos al objeto de ventana

El método addEventListener() le permite agregar detectores de eventos en cualquier HTML Objeto DOM como elementos HTML, el documento HTML, el objeto de ventana u otros objetos que admiten eventos, como el objeto xmlHttpRequest.

Ejemplo

Agregue un detector de eventos que se active cuando un usuario cambia el tamaño de la ventana:

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method on the window object.</p>

<p>Try resizing this browser window to trigger the "resize" event handler.</p>

<p id="demo"></p>

<script>
window.addEventListener("resize", function(){
  document.getElementById("demo").innerHTML = Math.random();
});
</script>

</body>
</html>

Pasar parámetros

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

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example demonstrates how to pass parameter values when using the addEventListener() method.</p>

<p>Click the button to perform a calculation.</p>

<button id="myBtn">Try it</button>

<p id="demo"></p>

<script>
let p1 = 5;
let p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
  myFunction(p1, p2);
});

function myFunction(a, b) {
  document.getElementById("demo").innerHTML = a * b;
}
</script>

</body>
</html>

¿Burbujeo de eventos o captura de eventos?

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

La propagación de eventos es una forma de definir el orden de los elementos cuando ocurre un evento. Si tiene un elemento <p> dentro de un elemento <div> y el usuario hace clic en el elemento <p>, ¿qué elemento ¿El evento "clic" debe manejarse primero?

En bubbling el evento del elemento más interno se maneja primero y luego el externo: Primero se maneja el evento de clic del elemento <p> y luego el evento de clic del elemento <div>.

Al capturar el evento del elemento más externo se maneja primero y luego el interno: El evento de clic del elemento <div> se manejará primero y luego el evento de clic del elemento <p>.

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

addEventListener(event, function, useCapture);

El valor predeterminado es falso, que utilizará la propagación burbujeante; cuando el valor se establece en verdadero, el evento utiliza la propagación de captura.

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
#myDiv1, #myDiv2 {
  background-color: coral;
  padding: 50px;
}

#myP1, #myP2 {
  background-color: white; 
  font-size: 20px;
  border: 1px solid;
  padding: 20px;
}
</style>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
</head>
<body>

<h2>JavaScript addEventListener()</h2>

<div id="myDiv1">
  <h2>Bubbling:</h2>
  <p id="myP1">Click me!</p>
</div><br>

<div id="myDiv2">
  <h2>Capturing:</h2>
  <p id="myP2">Click me!</p>
</div>

<script>
document.getElementById("myP1").addEventListener("click", function() {
  alert("You clicked the white element!");
}, false);

document.getElementById("myDiv1").addEventListener("click", function() {
  alert("You clicked the orange element!");
}, false);

document.getElementById("myP2").addEventListener("click", function() {
  alert("You clicked the white element!");
}, true);

document.getElementById("myDiv2").addEventListener("click", function() {
  alert("You clicked the orange element!");
}, true);
</script>

</body>
</html>

El método removeEventListener()

El método removeEventListener() elimina los controladores de eventos que han sido adjunto con el método addEventListener():

Ejemplo

element.removeEventListener("mousemove", myFunction);

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
  background-color: coral;
  border: 1px solid;
  padding: 50px;
  color: white;
  font-size: 20px;
}
</style>
</head>
<body>

<h2>JavaScript removeEventListener()</h2>

<div id="myDIV">
  <p>This div element has an onmousemove event handler that displays a random number every time you move your mouse inside this orange field.</p>
  <p>Click the button to remove the div's event handler.</p>
  <button onclick="removeHandler()" id="myBtn">Remove</button>
</div>

<p id="demo"></p>

<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);

function myFunction() {
  document.getElementById("demo").innerHTML = Math.random();
}

function removeHandler() {
  document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script>

</body>
</html>

Referencia de objetos de eventos HTML DOM

Para obtener una lista de todos los eventos HTML DOM, consulte nuestra Referencia completa de objetos de eventos HTML DOM.