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
- function p712_onclick()
- {
- alert('Vous avez cliqué sur moi');
- // Suppression de l'évènement
- this.removeEventListener('click', p712_onclick, true);
- };
- // Ajout de l'évènement
- 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.
- document.getElementById('p712_ex2').addEventListener(
- 'click',
- function()
- {
- alert('Vous avez cliqué sur moi');
- // Que mettre comme deuxième argument pour removeEventListener() ?
- },
- true
- );
Les fonctions anonymes nommées
Pour résoudre ce problème, il suffit de nommer la fonction anonyme.
Exemple : cliquez-moi
- document.getElementById('p712_ex3').addEventListener(
- 'click',
- function anon712()
- {
- alert('Vous avez cliqué sur moi');
- // Suppression de l'évènement OK !
- this.removeEventListener('click', anon712, true);
- },
- true
- );
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.