Ajout/enlèvement d’évènements sur des objets

En javascript, on peut aisément rajouter des évènements sur des objects en utilisant la méthode addEventListener et en supprimer avec removeEventListener.

Exemple : cliquez-moi

  1. function p712_onclick()
  2. {
  3.   alert('Vous avez cliqué sur moi');
  4.   // Suppression de l'évènement
  5.   this.removeEventListener('click', p712_onclick, true);
  6. };
  7. // Ajout de l'évènement
  8. document.getElementById('p712_ex1').addEventListener('click', p712_onclick, true);

Pour enlever l’évènement, il suffit d’appeler removeEventListener sur le même objet avec le même deuxième argument.

Les fonctions anonymes

Les fonctions anonymes vous evitent de déclarer une fonction dans votre scope : vous ne la déclarez que quand vous en avez besoin.

Exemple : cliquez-moi

Mais impossible de supprimer l’évènement, car si vous appelez removeEventListener avec le même code, l’interprêteur Javascript va créer un deuxième objet fonction effectuant le même code, à la volée.

  1. document.getElementById('p712_ex2').addEventListener(
  2.     'click',
  3.     function()
  4.     {
  5.       alert('Vous avez cliqué sur moi');
  6.       // Que mettre comme deuxième argument pour removeEventListener() ?
  7.     },
  8.     true
  9. );

Les fonctions anonymes nommées

Pour résoudre ce problème, il suffit de nommer la fonction anonyme.

Exemple : cliquez-moi

  1. document.getElementById('p712_ex3').addEventListener(
  2.     'click',
  3.     function anon712()
  4.     {
  5.       alert('Vous avez cliqué sur moi');
  6.       // Suppression de l'évènement  OK !
  7.       this.removeEventListener('click', anon712, true);
  8.     },
  9.     true
  10. );

Compatibilités avec les navigateurs

Et qui n’est pas compatible ? IE8 et les versions précédentes ! Donc ceci est surtout un memo pour le développement d’extensions avec Firefox, Safari et Chrome, et est très utile si (par hasard) vous écrivez un bootstrapped add-on.

Leave a Reply