Apprendre JS : Évènements

Liste des évènements

Les évènements constituent une composante majeure du JavaScript puisqu’ils nous permettent de déclencher des scripts lors d’interactions de l’utilisateur (clics, saisies claviers, scroll…). En voici les principaux :

Si ces évènements sont nombreux, il est important de noter qu’à eux seuls : click, scroll et keyup couvrent une grande majorité des besoins conventionnels.

Déclaration d’un évènement

❌ Via un attribut HTML

En ajoutant un attribut on[nomEvent], on peut placer directement un écouteur d’évènement sur une balise HTML. La valeur de cet attribut sera le script ou la fonction (la plupart du temps) à déclencher.

<button onclick="calculate()">Calculer</button>

function calculate() {
	// ...
}

✅ Via un écouteur d’évènement

On peut également déclarer des écouteurs d’évènements directement dans le code JavaScript avec la méthode addEventListener(). Cette fonction ne doit s’appliquer que sur un seul élément (une NodeList ou un tableau engendrera une erreur). Pour appliquer des écouteurs d’évènements sur plusieurs éléments, il faudra donc boucler dessus.

<button id="calculate">Calculer</button>

const button = document.querySelector("#calculate");

// Via une fonction anonyme
button.addEventListener("click", function() {
	// ...
});

// Via une fonction fléchée (syntaxe ES6)
button.addEventListener("click", () => {
	// ...
});

// Via une fonction nommée (traditionnelle)
button.addEventListener("click", maFonction);

function maFonction() {
	// ...
}

Suppression d’un évènement

Il peut parfois être intéressant de supprimer un écouteur d’évènement. Il sera alors possible de le faire avec la méthode removeEventListener().

const button = document.querySelector("#calculate");
button.addEventListener('click', maFonction);

function maFonction() {
	// ...
	button.removeEventListener('click', maFonction);
}

1. Le premier argument à fournir est le type d’évènement à supprimer.
2. Le second est la fonction attachée à cet évènement. Cela requiert donc pour l’évènement de déclencher une fonction nommée.

Opérateur this

Le paramètre this, comme son nom l’indique, pointe l’élément sur lequel l’évènement a été déclenché (celui sur lequel est placé l’écouteur d’évènement).

<button>Cliquez-moi !</button>

const button = document.querySelector("button");
button.addEventListener("click", function() {
	this.innerText = "Merci !"; // "this" fait ici référence à "button"
});

Objet Event

Dès qu’un évènement se produit, JavaScript génère un objet Event contenant le détail de l’évènement en question. Cet objet contient de nombreuses propriétés et méthodes communes à tous les évènements. On le charge en le déclarant en tant que paramètre de la fonction anonyme de l’écouteur d’évènement (généralement nommé event ou e).

const element = ...
element.addEventListener("click", function(event) {
	console.log(event);
	// ...
});

Méthodes

Nous aborderons ici uniquement la méthode la plus utilisée. 👇

Annuler le comportement par défaut

preventDefault() : permet d’annuler le comportement par défaut d’un élément. On l’utilise la plupart du temps pour annuler la navigation déclenchée par le clic sur un lien, mais pas que !

<a href="https://laconsole.dev">Lien</a>

const link = document.querySelector("a");
link.addEventListener("click", function(event) {
	// Annule le changement de page provoqué par le lien
	event.preventDefault();    
	// ...
});

Propriétés

Les propriétés de l’objet Event sont nombreuses, en voici les principales :

Ciblage

target : Retourne l’élément ciblé au déclenchement de l’évènement (dont le parent est l’élément qui possède l’évènement). currentTarget : Retourne l’élément qui a déclenché l’évènement (celui sur lequel est placé l’écouteur d’évènement). (cf. this)

<div id="demo">
	<h2>Titre</h2>
	<p>Paragraphe de démo</p>
</div>

const demo = document.querySelector("#demo");
demo.addEventListener("click", function(event) {
	// Renvoie l'élément cliqué (div, h2 ou p)
	const element1 = e.target;
	// Renvoie l'élément qui a déclenché l'évènement (div)
	const element2 = e.currentTarget;
});

Coordonnées

clientX et clientY : Retournent respectivement les coordonnées horizontales et verticales du pointeur de la souris, par rapport à la fenêtre (visible) du navigateur.

document.addEventListener('mousemove', function(event) {
	console.log('Client X : ' + event.clientX);
	console.log('Client Y : ' + event.clientY);
});

screenX et screenY : Retournent respectivement les coordonnées horizontales et verticales du pointeur de la souris, par rapport à l’écran de l’utilisateur.

document.addEventListener('mousemove', function(event) {
	console.log('Screen X : ' + event.screenX);
	console.log('Screen Y : ' + event.screenY);
});

Saisie clavier

key : Retourne la valeur de la touche qui a généré l’évènement pour keypress, kedown et keyup.

const emailInput = document.querySelector("#email")
emailInput.addEventListener('keydown', function(event) {
	console.log(event.key);
});