Logo dom
W3Api

EventTarget.addEventListener() | Dom

 
  • Modificado: 31 Jan 2023

Descripción

El método addEventListener() nos permite asociar un gestor de eventos a un determinado elemento, cuando se produzca un evento en concreto.

El elemento al que podemos asociar el control de eventos con addEventListener() puede ser un Element, Document o Window.

Como gestor de eventos podemos tener una función o un objeto que implemente el interface EventListener. En este caso la función que le asociemos puede ser anónima.

Sintaxis

addEventListener(type, listener)
addEventListener(type, listener, options)
addEventListener(type, listener, useCapture)

Parámetros

  • type, es una cadena con el tipo de evento sobre el que queremos registrar el gestor de eventos. Los tipos de eventos están definidos en el interface Event: ‘blur’, ‘click’, ‘dblclick’, ‘copy’, ‘focus’,…
  • listener, es el objeto que recibe la notificación y que implementa un interface Event. Por lo que los valores pueden ser null, un objeto con el método handleEvent() o una función Javascript.
  • options, nos permite especificar características del gestor de eventos. Entre las opciones tenemos:
    • capture, los eventos serán enviados al listener antes que a cualquier EventTarget que pueda existir dentro del árbol DOM. Por defecto tiene un valor de false.
    • once, indica que el listener puede ser invocado una única vez. Una vez invocado será eliminado.
    • passive, la función nunca llamará al método preventDefault() y en el caso de que lo hiciese saldría un warning por consola
    • signal, el listener será eliminado cuando el método abort() de AbortSignal es invocado.
  • useCapture, valor booleano que nos permite controlar la propagación del evento por el árbol DOM a diferentes elementos. Por defecto es false lo que hará que no haya propagación.

Objeto Padre

EventTarget

Ejemplo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Final de la Música</title>
</head>
<body>
<h1>Final de la Música</h1>

<audio id="miaudio" controls>  
	<source src="mimusica.ogg" type="audio/ogg">
	<source src="mimusica.mp3" type="audio/mpeg">
  Tu navegador no soporta el elemento <code>audio</code>.  
</audio>  

<div id="texto"></div>

<script>

 var reproductor = document.getElementById("miaudio");
 
 reproductor.addEventListener("ended", function(){
	 var texto = document.getElementById("texto");
	 texto.innerHTML = "Fin de la canción";	 
 });
  
</script>


</body>
</html>

Artículos