Les évènements

Les évènements correspondent à des actions effectuées soit par un utilisateur, soit par le navigateur lui-même.

Par exemple, lorsqu’un utilisateur clique sur un bouton HTML ou lorsque le navigateur va finir de charger une page web, on va parler d’événement.

Parfois, on va vouloir « attacher » une action spécifique à un évènement, comme par exemple modifier la taille des textes sur une page lorsque l’utilisateur clique sur un bouton.

la méthode addEventListener()

La méthode addEventListener() va nous permettre de lier du code à un évènement. On parlera alors de gestionnaire d’évènements.

Le code sera exécuté dès le déclenchement de l’évènement.

Cette méthode appartient à l’objet Element et va avoir besoin de deux arguments pour fonctionner : le nom de l’évènement déclencheur de l'action et le code relatif à l’action à effectuer.

EXEMPLE

var p = document.querySelector('.para');

p.addEventListener('click', function() {
	p.classList.add('bg');
});

.bg {
	background: yellow;
}

//Si vous passez la souris au dessus du "h3",
//alors apparait autour de cet élément une
//bordure verte de 4px d'épaisseur en pointillé

Exo

var heading = document.querySelector('.small');

heading.addEventListener('mouseover', function() {
	heading.classList.add('change');
});

.change {
	border: 4px dotted green;
}

Exo

La méthode addEventListener() va également nous permettre de lier plusieurs évènements différents à un même élément HTML.

Par exemple, on va pouvoir exécuter un code lorsqu’un utilisateur déplace le curseur de sa souris sur un élément et un autre code lorsqu’il reste cliqué dessus.

EXEMPLE

var heading = document.querySelector('.small');

heading.addEventListener('mouseover', function() {
	heading.classList.add('change');
});

heading.addEventListener('mouseleave', function() {
	heading.classList.remove('change');
});

Exo

//Créer un liste ordonée
//Si vous cliquez dessus, li prend la class .change
//Si vous cliquez à nouveau dessus, li revient 
//a sa forme initiale

var list = document.querySelectorAll('li');

for (var i = 0; i < list.length; i++) {
	list[i].addEventListener('click', function() {
		this.classList.toggle('change');
	});
}