Événements et état d’une interface web

Une page web interactive réagit à des événements : clic, saisie, soumission ou actions du clavier. Un gestionnaire enregistré sur une cible exécute du code lorsque l'événement concerné survient. Le code peut modifier un état puis mettre à jour l'affichage ; le texte visible n'est pas toujours la seule source de vérité de cet état.

La propagation d'un événement et les actions par défaut du navigateur sont des mécanismes distincts. Une soumission de formulaire, par exemple, peut déclencher une navigation si elle n'est pas traitée autrement. La même action doit rester utilisable au clavier avec des éléments sémantiques adaptés ; attacher un clic à un élément quelconque ne suffit pas à l'accessibilité.

Un compteur possède un état initial 2 et un gestionnaire qui ajoute 1 pour chaque activation du bouton. Après trois activations, l'état vaut 5 et l'affichage doit refléter 5. L'état n'est pas remis à 2 à chaque clic si l'initialisation a été exécutée une seule fois. Si deux fonctions gestionnaires distinctes, chacune ajoutant 1, avaient été enregistrées pour ce clic, une activation pourrait provoquer deux incréments. En revanche, addEventListener ne duplique pas le même callback pour la même cible, le même type et la même valeur de capture : l’enregistrement fait partie de l’analyse.

Dessinez une boucle : activation → gestionnaire → nouvel état → rendu. Notez le nombre d'enregistrements et le nombre d'activations séparément. Le schéma évite de confondre exécution du script au chargement et exécution de la fonction à l'événement.