Événements JavaScript
Les événements HTML sont des "choses" qui arrivent aux éléments HTML.
Lorsque JavaScript est utilisé dans des pages HTML, JavaScript peut "réagir" à ces événements.
Événements HTML
Un événement HTML peut être quelque chose que fait le navigateur ou quelque chose que fait un utilisateur.
Voici quelques exemples d'événements HTML :
- Une page Web HTML a fini de se charger
- Un champ de saisie HTML a été modifié
- Un bouton HTML a été cliqué
Souvent, lorsque des événements se produisent, vous voudrez peut-être faire quelque chose.
JavaScript vous permet d'exécuter du code lorsque des événements sont détectés.
HTML permet d'ajouter des attributs de gestionnaire d'événements, avec du code JavaScript , aux éléments HTML.
Avec guillemets simples :
<element
event='some JavaScript'>
Avec guillemets doubles :
<element
event="some JavaScript">
Dans l'exemple suivant, un onclickattribut (avec code) est ajouté à un
<button>élément :
Exemple
<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>
Dans l'exemple ci-dessus, le code JavaScript modifie le contenu de l'élément avec id="demo".
Dans l'exemple suivant, le code modifie le contenu de son propre élément (en utilisant this.innerHTML) :
Exemple
<button onclick="this.innerHTML = Date()">The time is?</button>
Le code JavaScript fait souvent plusieurs lignes. Il est plus courant de voir des attributs d'événement appeler des fonctions :
Exemple
<button onclick="displayDate()">The time is?</button>
Événements HTML courants
Voici une liste de certains événements HTML courants :
| Événement | La description |
|---|---|
| sur le changement | Un élément HTML a été modifié |
| sur clic | L'utilisateur clique sur un élément HTML |
| surmouseover | L'utilisateur déplace la souris sur un élément HTML |
| onmouseout | L'utilisateur éloigne la souris d'un élément HTML |
| onkeydown | L'utilisateur appuie sur une touche du clavier |
| en charge | Le navigateur a fini de charger la page |
La liste est bien plus longue : W3Schools JavaScript Reference HTML DOM Events .
Gestionnaires d'événements JavaScript
Les gestionnaires d'événements peuvent être utilisés pour gérer et vérifier les entrées de l'utilisateur, les actions de l'utilisateur et les actions du navigateur :
- Choses à faire à chaque fois qu'une page se charge
- Choses à faire lorsque la page est fermée
- Action à effectuer lorsqu'un utilisateur clique sur un bouton
- Contenu qui doit être vérifié lorsqu'un utilisateur saisit des données
- Et plus ...
De nombreuses méthodes différentes peuvent être utilisées pour permettre à JavaScript de fonctionner avec des événements :
- Les attributs d'événement HTML peuvent exécuter directement du code JavaScript
- Les attributs d'événement HTML peuvent appeler des fonctions JavaScript
- Vous pouvez attribuer vos propres fonctions de gestionnaire d'événements aux éléments HTML
- Vous pouvez empêcher l'envoi ou le traitement d'événements
- Et plus ...
Vous en apprendrez beaucoup plus sur les événements et les gestionnaires d'événements dans les chapitres HTML DOM.