Etat temporaire, section 4 WIP

react-tuto/src/markdown/4. Evènements/01. Introduction.md

@@ -10,7 +10,7 @@ et s'applique à une <em>cible</em>. Exemples d'évènements :
 * `keyup` correspond au <em>relâchement</em> d'une touche dans un élément de saisie, ce qui est subtilement différent (et notamment, ne s'applique pas à un élément comme `select`).
 
 Il est ensuite possible d'<em>écouter</em> les évènements, et d'effectuer une action lorsqu'ils surviennent.
-Pour cela, on attache un <em>gestionnaire</em> ou <em>handler</em> à l'élément sur lequel on veut écouter un évènement.
+Pour cela, on <em>attache</em> un <em>gestionnaire</em> ou <em>handler</em> à l'élément sur lequel on veut écouter un évènement.
 
 Un handler est une fonction, qui prend en paramètre un <em>objet</em> de type `Event`, qu'on peut avoir besoin d'utiliser.
 
@@ -35,3 +35,4 @@ button.onclick = function() {
 }
 </script>
 ```
+On a attaché un handler pour `click` en attribuant une fonction anonyme à la propriété `onclick`.

react-tuto/src/markdown/4. Evènements/02. Attacher des handlers.md

@@ -0,0 +1,48 @@
+On a vu comment attacher un handler pour l'évènement `click`, via la propriété `onclick`.
+
+Il existe une autre façon d'attacher des handlers. Imaginons qu'on veuille
+attacher non pas un, mais <em>plusieurs</em> handlers pour un même évènement.
+
+On ne pourrait pas faire cela avec les propriétés `on*`, car elles ne permettent d'attacher
+qu'<em>un seul</em> handler.
+
+<blockquote>
+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.
+
+Son pendant pour retirer un handler est la méthode <code>element.removeEventListener()</code>.
+</blockquote>
+
+Exemple, encore avec un bouton :
+```html
+<button id="btn3">Alerte <strong>une</strong> fois</button>
+<script>
+var handler1dejaSupprime = false;
+var button = document.getElementById('btn3');
+var handler1 = button.addEventListener('click', function() {
+  alert('Le bouton #btn3 a été cliqué');
+})
+var handler1dejaSupprime = false;
+function enleveHandlerAlerte() {
+  if(! handler1dejaSupprime) {
+    console.log('Suppression du 1er handler');
+    button.removeEventListener('click', handler1);
+    handler1dejaSupprime = true;
+  }
+  else {
+    console.log('Le 1er handler a déjà été supprimé !');
+  }
+
+}
+var handler2 = button.addEventListener('click', enleveHandlerAlerte);
+</script>
+```
+
+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
+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 !