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

L'interactivité que JS permet avec la page web repose sur un système d'évènements.

Des évènements sont émis lorsque l'utilisateur interagit avec la page web. Chaque évènement est nommé et s'applique à une cible. 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 relâchement 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'écouter les évènements, et d'effectuer une action lorsqu'ils surviennent. Pour cela, on attache un gestionnaire ou handler à l'élément sur lequel on veut écouter un évènement.

Un handler est une fonction, qui prend en paramètre un objet de type Event, qu'on peut avoir besoin d'utiliser.

Reprenons le tout premier exemple, le bouton de la section 1.1 :

<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 :

<button id="btn2">Click me</button>
<script>
var button = document.getElementById('btn2');
button.onclick = function() {
  alert("Je viens d'être cliqué !");
}
</script>