: javascript

Attacher des évènements

On parle ici d'attacher une fonction javascript qui doit être exécutée lorsqu'un évènement se produit. Il existe plusieurs façons de procéder. Voici l'ancienne méthode que l'on rencontre encore dans beaucoup de pages web existantes.

<h1 onclick='test();'>Titre</h1>

Ici on dit que la fonction test doit être appelée lorsque l'utilisateur clique sur l'élément h1.

Cette manière de faire n'est plus conseillée, il est préférable d'attacher l'évènement depuis javascript. On modifierait le code html ainsi:

<h1 id='toto'>Titre</h1>

Puis en javascript on peut écrire:

var e = document.getElementById('toto');
e.onclick = test;

Dans cet exemple, on repère l'élément voulu (ici grâce à son id). Puis on affecte à la propriété onclick une référence vers la fonction test. Attention de ne pas écrire test(), ceci appellerai la fonction test immédiatement puis affecterai son résultat à la propriété onclick.

Le problème avec cette approche (tout comme la précédente), c'est que l'on est limité à une seule fonction pour réagir au click sur un élément.

La manière moderne c'est l'utilisation de la méthode addEventListener que l'on pourrait traduire par "ajouter un écouteur d'évènement". Cette méthode permet donc de lier plusieurs fonctions pour un même évènement.

Malheureusement, Internet Explorer ne respecte pas ce standard du w3c et propose une méthode alternative attachEvent qui ne supporte pas la phase de capture dans la gestion des évènements.

Pour palier à ce problème d'incompatibilité, les frameworks proposent souvent une fonction de ce type:

function addEvent(e, evType, fn) {
  if(e.addEventListener) {
    e.addEventListener(evType, fn, false); // sans capture
    return true;
  } else if (e.attachEvent) {
    var r = e.attachEvent("on"+evType, fn);
    return r;
  } else { return false; }
}

Ici, on test si addEventListener est supportée si oui on l'utilise, sinon on utilise attachEvent. On notera aussi que le paramètre evType correspond au nom de l'évènement sans le on qui le précède. (onclick devient juste click).

Voici un exemple qui assigne deux fonctions au chargement de la page:

addEvent(window, 'load', fonction1);
addEvent(window, 'load', fonction2);

C'est un cas très fréquent d'assigner plusieurs fonctions au chargement de la page (évènement onload de window), c'est moins fréquent d'assigner plusieurs fonctions quand on clique sur une image ou un lien.

Quoi qu'il en soit, il est recommandé d'utiliser cette dernière manière de faire car elle évite des problèmes lorsque plusieurs scripts (notamment des librairies de divers horizons) sont utilisées dans une même page.

Editer