Método addEventListener

El método addEventListener permite asignar manejadores de eventos a un elemento. Con él, se puede especificar, por ejemplo, qué hacer al hacer clic en un botón o qué hacer al escribir texto en un campo de texto. En el primer parámetro especificamos el tipo de evento, en el segundo - la función que se ejecutará después del evento especificado en el primer parámetro. En el tercer parámetro opcional pasamos las características del objeto (once, capture, passive) o el parámetro useCapture.

Sintaxis

elemento.addEventListener('tipo de evento', función, [características del objeto]);
o
elemento.addEventListener('tipo de evento', función, [useCapture]);

Ejemplo

Hagamos que al hacer clic en un botón se muestre un mensaje:

<input type="button" id="button" value="click me">

let button = document.querySelector('#button');

button.addEventListener('click', function() {
	alert('message');
});

Ejemplo

Escribamos código para que al perder el foco en un input se muestre un mensaje con el texto de ese input:

<input id="input" value="text">

let input = document.querySelector('#input');

input.addEventListener('blur', function() {
	alert(this.value);
});

Ejemplo

Hagamos que al hacer clic en un botón el mensaje se muestre en la consola solo una vez. Para ello, utilizaremos el segundo parámetro:

<input type="button" id="button" value="click me">

let button = document.querySelector('#button');

button.addEventListener('click',
	function() {
		console.log('message');
	},
	{
		once: true
	}
);

Ejemplo

El parámetro passive prohíbe llamar al método event.preventDefault al manejar el evento. Apliquemos el método event.preventDefault al ejemplo anterior, y también especifiquemos en el parámetro passive el valor true:

<input type="button" id="button" value="click me">

let button = document.querySelector('#button');

button.addEventListener('click',
	function(event) {
		event.preventDefault();
		console.log('No message');
	},
	{
		passive: true
	}
);

Después de ejecutar el código veremos los siguientes mensajes:

'No message';
'Unable to preventDefault inside passive event listener invocation.'

Ejemplo

El parámetro useCapture con valor true muestra el burbujeo de eventos desde el elemento interno al externo, mientras que con valor false - desde el externo al interno. Al pasar el parámetro useCapture, su nombre se omite y se escribe simplemente true o false. Veamos cómo burbujean los eventos en el elemento padre y en el hijo al hacer clic en ellos:

<div id="parent">Parent
	<p id="child">Child</p>
</div>

#parent{
	width: 60px;
	padding: 10px;
	border: 1px solid red;
	text-align: center;
}
#child{
	width: 60px;
	marging-right: 40px;
	border: 1px solid blue;
	text-align: center;
}

let parent = document.querySelector('#parent');
let child = document.querySelector('#parent');

parent.addEventListener('click',
	() => alert('parent'), 
	true
);
child.addEventListener('click',
	() => alert('child'), 
	true
);

Véase también

método removeEventListener,
que desvincula un evento de un elemento