La programmation qui permet des calculs basés sur les activités dans un navigateur ou par les activités effectuées par l’utilisateur sur les éléments d’un document est connue sous le nom de programmation événementielle.
Un événement est la spécification (essentiellement un objet créé par le navigateur et JavaScript) de quelque chose d’important qui s’est produit. Des exemples d’événements sont le clic, l’envoi, le keyup, etc. En JavaScript, tous les noms d’événements sont spécifiés en minuscules. Un gestionnaire d’événement (essentiellement une fonction) est un ensemble d’instructions (code) qui gère l’événement.
Le tableau ci-dessous énumère les événements les plus couramment utilisés et les attributs de balises qui leur sont associés :
| Evènement (Event) | Balise attribut (Tag Attribute) |
|---|---|
| blur | onblur |
| change | onchange |
| click | onclick |
| dblclick | ondblclick |
| focus | onfocus |
| keydown | onkeydown |
| keypress | onkeypress |
| keyup | onkeyup |
| load | onload |
| mousedown | onmousedown |
| mouseup | onmouseup |
| mousemove | onmousemove |
| mouseover | onmouseover |
| mouseout | onmouseout |
| reset | onreset |
| select | onselect |
| submit | onsubmit |
| unload | onunload |
| Attribut (Attribute | Balise (Tag) | Description de l’événement |
|---|---|---|
| onblur | <a> <button> <input> <textarea> <select> | Lorsque la balise <a> perd de son focus. Lorsque la balise <button> perd de son focus. Lorsque la balise <input> perd de son focus Lorsque la balise <textarea> perd de son focus Lorsque la balise <select> perd de son focus |
| onchange | <input> <textarea> <select> | Lorsque la balise <input> est modifiée et perd de son focus. Lorsque la balise <textarea> change et perd de sa focus. Lorsque la balise <select> est modifiée et perd de son focus. |
| onclick | <a> <input> | Lorsque l’utilisateur clique sur la balise <a>. Lorsque la balise <input> est cliquée. |
| ondblclick | La plupart des balises | Lorsque l’utilisateur double-clique sur le bouton gauche de la souris. |
| onfocus | <a> <input> <textarea> <select> | Lorsque la balise <a> prend son focus. Lorsque la balise <input> prend son focus. |
| onkeydown | <body> éléments de <form> | Lorsqu’une touche du clavier est enfoncée |
| onkeypress | <body> éléments de <form> | Lorsqu’une touche du clavier est pressée et relâchée |
| onkeyup | <body> éléments de <form> | Lorsqu’une touche du clavier est relâchée |
| onload | <body> | Lorsque chargement du document est terminé |
| onmousedown | La plupart des balises | Lorsque l’utilisateur clique sur le bouton gauche de la souris |
| onmouseup | La plupart des balises | Lorsque l’utilisateur relâche le bouton gauche de la souris |
| onmousemove | La plupart des balises | Lorsque l’utilisateur déplace le curseur de la souris sur l’élément |
| onmouseover | La plupart des balises | Lorsque le curseur de la souris est déplacé sur l’élément |
| onmouseout | La plupart des balises | Lorsque le curseur de la souris est éloigné de l’élément (il sort de l’élément). |
| onreset | <form> | Lorsque le bouton de réinitialisation est cliqué |
| onselect | <input> <textarea> | Lorsque le curseur de la souris est déplacé sur la balise <input> ou que le texte est sélectionné dans la zone de texte <textarea>. |
| onsubmit | <form> | Lorsque le bouton de type= »submit » est pressé |
| onunload | <body> | Lorsque l’utilisateur quitte le document |
Le tableau ci-dessous énumère les attributs des événements et leurs balises correspondantes en HTML :
Le processus consistant à associer un gestionnaire d’événements à un événement est connu sous le nom d’enregistrement. Il existe trois façons d’enregistrer un gestionnaire d’événements dans le modèle d’événement DOM.
1. La première consiste à attribuer le script de gestion d’événements à un attribut de balise d’événement, comme indiqué ci-dessous :
// Au clic du bouton on exécutera la fonction func1() <input type=”button” value=”Cliquez ici” onclick=”func1( );” />
Dans le code ci-dessus, le gestionnaire d’événement func1 est attribué à l’attribut d’événement onclick d’un bouton.
2. La deuxième façon consiste à affecter le gestionnaire d’événement à la propriété d’événement de l’élément, comme indiqué ci-dessous :
// Au clic de l'élément on exécutera la fonction func1() document.getElementById(ID_de_Element).onclick = func1;
3. Enfin la troisième façon et la plus communément utilisée depuis ES6 et d’utiliser ce qu’on appelle un écouteur d’événement.
// Au clic de l'élément on exécutera la fonction func1()
const element = document.querySelector("ID_ou_Class_Element");
element.addEventListener('click', func1);
Les trois manières fonctionnent et selon le contexte vous pourrez être amené à rencontrer et utiliser l’une des trois. Mais gardez en mémoire que c’est la dernière façon qui est préconisée.
