|
@@ -0,0 +1,37 @@
|
|
|
|
|
+<blockquote>
|
|
|
|
|
+L'interactivité que JS permet avec la page web repose sur un système d'<em>évènements</em>.
|
|
|
|
|
+</blockquote>
|
|
|
|
|
+
|
|
|
|
|
+Des évènements sont émis lorsque l'utilisateur interagit avec la page web. Chaque évènement est <em>nommé</em>
|
|
|
|
|
+et s'applique à une <em>cible</em>. Exemples d'évènements :
|
|
|
|
|
+* `click` correspond au clic sur un élément (par exemple un lien, un bouton).
|
|
|
|
|
+* `submit` correspond à la soumission d'un formulaire, et ne s'applique qu'à un élément `form`.
|
|
|
|
|
+* `change` correspond au changement de valeur d'un élément de saisie dans un formulaire, comme `input`, `select` ou `textarea`.
|
|
|
|
|
+* `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.
|
|
|
|
|
+
|
|
|
|
|
+Un handler est une fonction, qui prend en paramètre un <em>objet</em> de type `Event`, qu'on peut avoir besoin d'utiliser.
|
|
|
|
|
+
|
|
|
|
|
+Reprenons le tout premier exemple, le bouton de la section 1.1 :
|
|
|
|
|
+
|
|
|
|
|
+```html
|
|
|
|
|
+<button onclick="alert('Hi!')">Click me</button>
|
|
|
|
|
+```
|
|
|
|
|
+On a attaché au bouton un handler pour l'évènement `click`, en l'attribuant directement dans l'attribut `onclick`.
|
|
|
|
|
+Un élément dispose de propriétés `on*` pour chaque type d'évènement, où `*` est le nom de l'évènement.
|
|
|
|
|
+
|
|
|
|
|
+Cette façon d'attacher un handler directement sur la balise est un peu rudimentaire : on appelle cela du JS "inline",
|
|
|
|
|
+et ce n'est généralement pas considéré comme une bonne pratique.
|
|
|
|
|
+
|
|
|
|
|
+A la place, on préfère attacher les handlers via du code JS. En reprenant l'exemple précédent, avec un `id` pour identifier le bouton :
|
|
|
|
|
+```html
|
|
|
|
|
+<button id="btn2">Click me</button>
|
|
|
|
|
+<script>
|
|
|
|
|
+var button = document.getElementById('btn2');
|
|
|
|
|
+button.onclick = function() {
|
|
|
|
|
+ alert("Je viens d'être cliqué !");
|
|
|
|
|
+}
|
|
|
|
|
+</script>
|
|
|
|
|
+```
|
