Événements

JS dans une page web permet une programmation événementiel. La page web ne bouge pas, elle attend. Et puis il se produit quelque chose, un événement, et la page réagit.

La plupart des événements viennent d'actions de l'utilisateur : un clic de souris, un mouvement de souris, une pression sur une touche de clavier… Certains événements sont liés à un échange avec un serveur : réception de données, réponse du serveur, échec d'une requête vers le serveur…

Définir l'événement va consister à :

indiquer de quel type d'événement il s'agit – clic, double-clic…
indiquer à quel élément de la page il s'applique
indiquer la fonction JS à exécuter quand l'événement a lieu

Les événements utiles à connaître

load : Quand l'élément est chargé. On l'associe souvent à <body>, permet d'attendre que la page est bien chargée.
click : clic souris.
dblclick : double clic.
mouseover : quand la souris passe au-dessus.
mouseout : quand la souris arrête d'être au-dessus.
keypress : quand on appuie sur une touche pour entrer un caractère.
Utile dans un champ de saisie.
input : quand le contenu d'un champ de saisie texte est modifié, à chaque entrée de caractère.
change : quand le contenu d'un champ de saisie est modifié, mais ce changement est validé (un peu différent du précédent).
focus : quand l'élément gagne le focus.
Dans une page où on trouve plusieurs zones de saisie, celle dans laquelle on est en train d'écrire est celle qui a le focus – focalisation.
blur : perte du focus.
submit : dans le cas d'un formulaire, quand le formulaire est validé et peut-être envoyé.

Événement dans la page

On peut indiquer un événement directement dans la page html.

<p onclick='alert("tralala");'>Contenu de la balise p.</p>

Notez que le nom de l'événement est précédé de on.
Le code JS peut être écrit directement à côté.

Ce n'est pas une bonne méthode. On veut au maximum séparer le code JS du contenu html.

Événement dans le JS

Pour faire la même chose, on préférera identifier l'élément voulu par un id par exemple.

<p id="mon_id">Contenu de la balise p.</p>

Puis dans le JS,

atteindre le nœud <p> désiré,
associer ce nœud à la fonction JS voulue.

function action(e){
  // Je définit une fonction exprès qui sera déclenchée par l'événement
  // e contient des informations sur l'événement à l'origine de l'exécution
}

node = document.getElementById("mon_id");
node.addEventListener("click", action);

EventListener : Écouteur d'événement. On demande au nœud de se mettre à l'écoute dans l'éventualité d'un événement.

Remarquez que l'événement déclenche – trigger – une fonction en lui fournissant un argument e qui renseigne la fonction sur l'événement lui-même. Par exemple, on pourrait avoir besoin de savoir les coordonnées d'un clic de souris. C'est possible.

function action(e){
  // Je définit une fonction exprès qui sera déclenchée par l'événement
  // e contient des informations sur l'événement à l'origine de l'exécution
  console.log(e.clientX);
  console.log(e.clientY);
}

node = document.getElementById("mon_id");
node.addEventListener("click", action);

Avec jQuery

jQuery donne accès à une syntaxe plus courte. Dans le cas précédent on aurait :

function action(e){
  // Je définit une fonction exprès qui sera déclenchée par l'événement
  // e contient des informations sur l'événement à l'origine de l'exécution
}

$("#mon_id").click(action);