|
@@ -9,7 +9,7 @@ qu'<em>un seul</em> handler.
|
|
|
<blockquote>
|
|
<blockquote>
|
|
|
La méthode <code>element.addEventListener()</code> est l'autre façon d'attacher un handler d'évènement.
|
|
La méthode <code>element.addEventListener()</code> est l'autre façon d'attacher un handler d'évènement.
|
|
|
On peut attacher plusieurs handlers en l'appelant plusieurs fois.
|
|
On peut attacher plusieurs handlers en l'appelant plusieurs fois.
|
|
|
-
|
|
|
|
|
|
|
+<br><br>
|
|
|
Son pendant pour retirer un handler est la méthode <code>element.removeEventListener()</code>.
|
|
Son pendant pour retirer un handler est la méthode <code>element.removeEventListener()</code>.
|
|
|
</blockquote>
|
|
</blockquote>
|
|
|
|
|
|
|
@@ -17,32 +17,35 @@ Exemple, encore avec un bouton :
|
|
|
```html
|
|
```html
|
|
|
<button id="btn3">Alerte <strong>une</strong> fois</button>
|
|
<button id="btn3">Alerte <strong>une</strong> fois</button>
|
|
|
<script>
|
|
<script>
|
|
|
|
|
+// Variables
|
|
|
var handler1dejaSupprime = false;
|
|
var handler1dejaSupprime = false;
|
|
|
var button = document.getElementById('btn3');
|
|
var button = document.getElementById('btn3');
|
|
|
-var handler1 = button.addEventListener('click', function() {
|
|
|
|
|
|
|
+
|
|
|
|
|
+// Handlers
|
|
|
|
|
+function handlerAlerte() {
|
|
|
alert('Le bouton #btn3 a été cliqué');
|
|
alert('Le bouton #btn3 a été cliqué');
|
|
|
-})
|
|
|
|
|
-var handler1dejaSupprime = false;
|
|
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
function enleveHandlerAlerte() {
|
|
function enleveHandlerAlerte() {
|
|
|
if(! handler1dejaSupprime) {
|
|
if(! handler1dejaSupprime) {
|
|
|
console.log('Suppression du 1er handler');
|
|
console.log('Suppression du 1er handler');
|
|
|
- button.removeEventListener('click', handler1);
|
|
|
|
|
|
|
+ button.removeEventListener('click', handlerAlerte);
|
|
|
handler1dejaSupprime = true;
|
|
handler1dejaSupprime = true;
|
|
|
}
|
|
}
|
|
|
else {
|
|
else {
|
|
|
console.log('Le 1er handler a déjà été supprimé !');
|
|
console.log('Le 1er handler a déjà été supprimé !');
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
}
|
|
}
|
|
|
-var handler2 = button.addEventListener('click', enleveHandlerAlerte);
|
|
|
|
|
|
|
+
|
|
|
|
|
+// Attache les handlers
|
|
|
|
|
+button.addEventListener('click', handlerAlerte);
|
|
|
|
|
+button.addEventListener('click', enleveHandlerAlerte);
|
|
|
</script>
|
|
</script>
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
Remarques :
|
|
Remarques :
|
|
|
-* On a utilisé deux syntaxes différentes pour attacher les handlers :
|
|
|
|
|
- * Le premier a été attaché en utilisant une fonction anonyme, directement passée en paramètre.
|
|
|
|
|
- * Le deuxième a été attaché en passant une fonction nommée.
|
|
|
|
|
-* `addEventListener()` retourne une référence au handler, ce qui est indispensable si on souhaite ensuite le retirer.
|
|
|
|
|
-* On se sert justement de la référence au premier handler dans le deuxième : les évènements `click` venant après le premier
|
|
|
|
|
|
|
+* Contrairement à l'exemple précédent, où on attachait fonction anonyme comme handler, on utilise des fonctions nommées.
|
|
|
|
|
+C'est indispensable si on souhaite ensuite les retirer.
|
|
|
|
|
+* On se sert justement de la référence au premier handler `handlerAlerte` dans le deuxième : les évènements `click` venant après le premier
|
|
|
ne provoqueront plus d'alerte !
|
|
ne provoqueront plus d'alerte !
|
|
|
* On utilise le booléen `handler1dejaSupprime`, pour savoir si on doit supprimer le handler : ceci afin de ne pas tenter de le retirer une deuxième fois !
|
|
* On utilise le booléen `handler1dejaSupprime`, pour savoir si on doit supprimer le handler : ceci afin de ne pas tenter de le retirer une deuxième fois !
|