Événements JavaScript
Événements HTML
Les événements HTML sont des actions qui se produisent sur des éléments HTML.
Exemples d'événements :
- Un bouton HTML est cliqué
- Une page web a fini de se charger
- La souris se déplace sur un élément
- Une touche du clavier est enfoncée
- Un champ de saisie HTML est modifié
Événements JavaScript
Souvent, lorsque des événements se produisent, vous pouvez vouloir effectuer une action.
Lorsque JavaScript est utilisé dans des pages HTML, JavaScript peut réagir aux événements .
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.
Syntaxe
Avec des guillemets simples :
< élément événement = ' du JavaScript ' > Avec des guillemets doubles :
< élément événement = " du JavaScript " > Dans l'exemple suivant, un attribut onclick (avec du code) est ajouté à un élément <button> :
Exemple
<button onclick="document.getElementById('demo').innerHTML = Date()">Quelle heure est-il ?</button>
Dans l'exemple ci-dessus, le code JavaScript change le contenu de l'élément avec id="demo".
Dans l'exemple suivant, le code change le contenu de son propre élément en utilisant this .innerHTML :
Exemple
<button onclick="this.innerHTML = Date()">Quelle heure est-il ?</button>
Appeler une fonction JavaScript
Le code JavaScript peut souvent comporter plusieurs lignes.
Il est plus courant d'utiliser l'attribut d'événement pour appeler des fonctions :
Exemple
<button onclick="displayDate()">Quelle heure est-il ?</button>
<script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script> Événements HTML courants
Voici une liste de quelques événements HTML courants :
| Événement | Description |
|---|---|
| onchange | Un élément HTML a été modifié |
| onclick | L'utilisateur clique sur un élément HTML |
| onmouseover | L'utilisateur déplace la souris sur un élément HTML |
| onmouseout | L'utilisateur déplace la souris loin d'un élément HTML |
| onkeydown | L'utilisateur appuie sur une touche du clavier |
| onload | Le navigateur a fini de charger la page |
La liste est beaucoup plus longue : formation-ti.org Référence JavaScript Événements DOM HTML .
Gestionnaires d'événements JavaScript
Un gestionnaire d'événements est un code JavaScript qui s'exécute lorsqu'un événement se produit.
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 :
- Des actions à réaliser chaque fois qu'une page se charge
- Des actions à réaliser lorsque la page est fermée
- Une action à effectuer lorsqu'un utilisateur clique sur un bouton
- Un contenu à vérifier lorsque l'utilisateur saisit des données
- Et plus ...
De nombreuses méthodes différentes peuvent être utilisées pour permettre à JavaScript de travailler avec des événements :
- Les attributs d'événements HTML peuvent exécuter du code JavaScript directement
- Les attributs d'événements 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 les événements d'être envoyés ou gérés
- Et plus ...
Utiliser un écouteur d'événements
L'utilisation d'attributs d'événements comme onclick est simple.
Néanmoins, utiliser addEventListener() est la méthode recommandée pour gérer les événements.
Non recommandé
Utiliser l'attribut onclick :
<button onclick="displayDate()">Quelle heure est-il ?</button>
<p id="demo"></p>
<script>
// Fonction pour afficher la date
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script> La méthode addEventListener() permet de garder HTML et JavaScript séparés.
Fortement recommandé
Utiliser la méthode addEventListener() :
<button id="myBtn">Cliquez sur moi</button>
<p id="demo"></p>
<script>
const btn = document.getElementById("myBtn");
// Ajouter EventListener à btn
btn.addEventListener("click", function () {
document.getElementById("demo").innerHTML = Date();
});
</script> Remarque
Vous apprendrez beaucoup plus sur les événements et les gestionnaires d'événements dans les chapitres HTML DOM.