Le 16 Septembre 2015

Gérez vos évènements avec addEventListener

Encore aujourd’hui, de nombreuse personnes quelles soit simples débutantes ou par manque d’information gèrent leurs évènements JavaScript en appelant directement les fonctions depuis leur code HTML. Pourtant vous avez pris l’habitude de créer une feuille CSS externe pour l’intégrer dans votre page web, alors pourquoi ne pas en faire autant avec vos scripts JavaScript ?

De quoi parlons nous ?

Voici la méthode la plus communément utilisée, nous appelons une fonction à chaque clic de souris sur l’élément de cette manière:
<span onclick="afficher();"> Affichez-moi </span>

Bien que pratique soit encore utilisée dans certains cas, elle fait maintenant partie du passé. Mais alors fait-on… c'est ce que nous allons découvrir.

Le gestionnaire d'évènements du DOM-2 #

Le modèle d'événement DOM niveau 2 fournit une nouvelle méthode, un gestionnaire d'évènements permettant d’écouter tout type d’évènement sur n’importe quel élément HTML, nœud et le document lui-même.

Les avantages :

  • Avoir un JavaScript externalisé (ou regroupé entre les balises script de votre fichier)
  • Un code HTML propre et lisible
  • La simplicité de mise en place
  • La possibilité de cumuler plusieurs types évènements sur un même élément HTML

Soyez à l’écoute avec AddEventListener #

La syntaxe de cette méthode comporte 3 paramètres :

  • Le nom (type) de l’évènement qui est écouté
  • La fonction anonyme qui doit être exécutée (ou le nom d’une fonction qui doit être appelée)
  • Le troisième paramètre est facultatif et demande une analyse complémentaire.
    Pour en savoir plus suivez ce lien : Mozilla.org

Comment ça marche #

Pour comprendre le fonctionnement, nous allons commencer par écouter un évènement de type click sur un élément HTML ayant comme identifiant #cible

Un simple code HTML pour le test :

HTML


	
	

Nous devons appeler un fichier externe test.js, juste avant la fermeture du body. La raison est simple, cela permet d’être opérationnel une fois le document HTML chargé.

Notre fichier test.js

JAVASCRIPT

var element = document.getElementById('cible');
	
element.addEventListener('click', function() {
     // le code de traitement...
}, false);

Suivons pas à pas ce qu’il se passe :

  • Pour commencer nous ciblons l’élément HTML identfié #cible et l’affectons à notre variable « element »
  • Puis nous faisons appel à la méthode addEventListener avec comme premier paramètre le type d’évènement à écouter
  • Ensuit l’initialisation de la fonction anonyme en deuxième paramètre
  • Le troisième est un booléen laissé à false pour notre exemple. Suivre le lien donné plus haut pour son utilisation
  • Entre les accolades votre code de traitement à exécuter, vous pouvez bien entendu appeler d’autres fonctions

Avouez qu’il n’y a rien de compliqué, séparé du fichier HTML, le script est bien plus compréhensible et maintenable.

Tout cela est parfait, nous détectons bien notre click comme avec l’ancienne méthode. Mais nous pouvons aller plus loin. Comme préciser dans les avantages, il est possible de cumuler plusieurs types d’évènement sur notre élément. Et c’est bien la que le gestionnaire prends tout son sens…

Dans l'exemple qui suit, nous allons écouter le click, le double clic, le survol avec mouseover et le mouseout sur notre div #cible

JAVASCRIPT

var element = document.getElementById('cible');
	
    element.addEventListener('click', function() {
       // traitement au clic
    });
    element.addEventListener('dblclick', function() {
       // traitement au double clic
    });
    element.addEventListener('mouseover', function() {
       // traitement du survol
    });
    element.addEventListener('mouseout', function() {
       // traitement en sortie de l'élément
    });	

-- VOIR LA DEMO EN LIGNE --

Utiliser le gestionnaire d’évènements avec des classes #

Ne nous arrêtons pas en si bon chemin, profitons en pour découvrir une autre méthode peu utilisée. Cibler un identifiant est une chose simple, mais lorsque nous devons le faire sur plusieurs éléments HTML possédant la même classe les choses se compliques. C’est une question souvent abordée dans les forums et nous allons y répondre de suite.

La méthode traditionnelle avec getElementsByClassName() #

Cette méthode permet de parcourir les éléments de même classe et les stocker dans un tableau. Il suffit alors de parcourir celui-ci dans une boucle FOR dans laquelle nous intégrons notre gestionnaire d’évènements. De la même manière il est possible de cumuler les évènements à écouter, mais ça vous savez le faire maintenant.

HTML


	
	

JAVASCRIPT

var element = document.getElementsByClassName("cible");

for (var i = 0; i < element.length; i++) {	
     element[i].addEventListener("mouseover", function(){
		 // Si l'élément parcouru possède un Id et que nous souhaitons le récupérer
		 var el_id = this.id;
		 // Si on souhaite seulement récupérer le contenu de l'élément parcouru
		 var el_texte = this.innerHTML;
   }, false);
}

-- VOIR LA DEMO EN LIGNE --

Découvrons la méthode avec querySelectorAll() #

Partie intégrante de l' API Selectors , Cette méthodes permet d’accéder aux éléments HTML du document comme on l’a fait avec getElementsByClassName()

Hum… oui et alors quel est l’intérêt de l’utiliser ? Dans le script précédent nous devions parcourir le tableau avec une boucle FOR. Maintenant, si nous désirons cibler des éléments HTML de même classe il n’y a plus besoin de boucle, la ligne suivante le démontre :

var element = document.querySelectorAll("div.cible");

Comme pour travailler sur un tableau traditionnel, on peut accéder à chaque élément suivant son indice[ .. ] de position dans le tableau. Cette méthode récente est puissante, Il y d’autre utilisations/façons de procéder pour cibler vos éléments. Je vous laisse les découvrir sur le site Alsacréation

HTML

    

	

JAVASCRIPT

var element = document.querySelectorAll(".demo-block");

  element[0].style.backgroundColor="#1CE8D3";
  element[1].style.backgroundColor="#1CE8AA";
  element[2].style.backgroundColor="#1CE881";
  element[3].style.backgroundColor="#1CE855";
  element[4].style.backgroundColor="#1CE82E";

-- VOIR UN EXEMPLE ICI --


Notre article portant sur le gestionnaire d’évènements, nous allons combiner ces 2 méthodes, nous devons par contre encore faire appel à une boucle FOR dans ce cas la, mais l’intérêt est évident.

JAVASCRIPT

var element = document.querySelectorAll(".cible");

for (var i = 0; i < element.length; i++) {	
     element[i].addEventListener("click", function(){
		// traitement du clic
   }, false);
     element[i].addEventListener("mouseover", function(){
		// traitement du survol
   }, false);
}

-- VOIR LA DEMO EN LIGNE --


Voilà notre article touche à sa fin, en espérant vous avoir convaincu d’utiliser le gestionnaire d’évènements, combiné avec querySelector() et querySelectorAll() vous découvrez le champ des possibilités offertes et une nouvelle façon de concevoir, parcourir et gérer les évènements.