Méthode addEventListener

La méthode addEventListener permet d'assigner des gestionnaires d'événements à un élément. Avec elle, on peut spécifier, par exemple, quoi faire lors d'un clic sur un bouton ou quoi faire lors de la saisie de texte dans un champ de texte. Dans le premier paramètre, on spécifie le type d'événement transmis, dans le second - la fonction qui se déclenchera après l'événement spécifié dans le premier paramètre. Dans le troisième paramètre optionnel, on transmet les caractéristiques de l'objet (once, capture, passive) ou le paramètre useCapture.

Syntaxe

élément.addEventListener('type d'événement', fonction, [caractéristiques de l'objet]);
ou
élément.addEventListener('type d'événement', fonction, [useCapture]);

Exemple

Faisons en sorte qu'un message s'affiche lorsqu'on clique sur le bouton :

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

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

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

Exemple

Écrivons un code pour qu'à la perte du focus dans l'input, un message avec le texte de cet input s'affiche :

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

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

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

Exemple

Faisons en sorte qu'au clic sur le bouton, le message s'affiche dans la console une seule fois. Pour cela, utilisons le deuxième paramètre :

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

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

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

Exemple

Le paramètre passive interdit d'appeler la méthode event.preventDefault lors du traitement de l'événement. Appliquons la méthode event.preventDefault à l'exemple précédent, et spécifions également la valeur true dans le paramètre passive :

<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
	}
);

Après l'exécution du code, nous verrons les messages suivants :

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

Exemple

Le paramètre useCapture avec la valeur true montre la remontée des événements de l'élément interne vers l'élément externe, avec la valeur false - de l'élément externe vers l'élément interne. Lors de la transmission du paramètre useCapture, son nom est omis et on écrit simplement true ou false. Voyons comment les événements remontent dans l'élément parent et l'élément enfant lorsqu'on clique dessus :

<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
);

Voir aussi

la méthode removeEventListener,
qui détache un événement d'un élément