Évènements et Listeners

La dernière chose à voir ici sont les évènements et les listeners. Vous savez désormais utiliser les boucles, les conditions, englober des lignes de code dans des fonctions pour ensuite les utiliser. Vous savez manier toutes les variables, même celles que vous ne connaissez pas encore. Vous savez parcourir et manipuler le DOM à votre guise. Il ne manque plus qu'une seule chose pour faire ce que vous souhaitez sur votre page HTML, c'est écouter des évènements.

Évènement

Un évènement, c'est tout ce qui peut se passer sur une page HTML ou, d'une manière générale, sur votre navigateur. Par exemple, lorsque vous cliquez quelque part, c'est un évènement. Lorsque vous actualisez votre page, c'est un évènement. Lorsque la page commence à charger, et même lorsqu'elle termine de charger, ce sont des évènements. Modifier un input, c'est un évènement.

Bref, vous l'aurez compris, prendre en compte les évènements en JavaScript, ça vous permettra de dynamiser votre code et donc les fonctionnalités de votre page HTML. Mais pour cela, il faut savoir les écouter...

Listeners

Pour écouter un évènement, on utilise ce qu'on appelle un listener. C'est une méthode appartenant par exemple à l'objet window ou bien à l'objet document et tous ses sous-objets, donc tous les éléments de votre DOM. Vous pouvez passer en argument de cette méthode, toute une fonction, qui sera exécutée lorsque l'évènement se produira. Par exemple, si vous souhaitez écouter les clics de souris sur une div, alors vous utiliserez la méthode d'ajout de listener de la div concernée, méthode à laquelle vous fournirez en argument, la fonction que vous souhaitez exécuter lorsque l'évènement se déclenche.

var myDiv = document.getElementById("the-div");
myDiv.addEventListener("click", function(){
    //l'intérieur de la fonction que l'on passe en argument de la méthode
    //addEventListener de l'objet myDiv.
    console.log("un clic sur la div a été détecté !");
    console.log("la div concernée est :");
    console.log(this);
});

Dans cet exemple, cliquer sur la balise HTML donc l'id est the-div affichera un message dans la console. À noter que this est un mot permettant de faire référence à myDiv. En effet, myDiv n'existe pas au sein de cette fonction, on ne peut y faire référence qu'au travers du mot clé this. En effet, this, dans ce cas là, fera toujours référence à l'élément sur lequel on ajoute le listener.

Il existe plusieurs évènements différents et on peut tous y connecter des listeners. Voici ci-dessous une liste des listeners les plus fréquemment utilisés :

Évènement	Description
click	Lorsque l'élément est cliqué.
change	Lorsque l'attribut value de l'élément est modifié.
load	lorsque l'élément à fini de charger. (Souvent utilisé sur window pour s'assurer que la page a été chargée entièrement avant d'exécuter nos scripts).
mouseover	Lorsque le curseur de la souris passe sur l'élément.
keydown	Lorsqu'une touche du clavier a été pressée.