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 initialevar list = document.querySelectorAll('li');
for (var i = 0; i < list.length; i++) {
list[i].addEventListener('click', function() {
this.classList.toggle('change');
});
}
Exo
JS - Les événements
By Jonathan Blanc
