Événements JavaScript HTML DOM
HTML DOM permet à JavaScript de réagir aux événements HTML :
Réagir aux événements
Un JavaScript peut être exécuté lorsqu'un événement se produit, comme lorsqu'un utilisateur clique sur un élément HTML.
Pour exécuter du code lorsqu'un utilisateur clique sur un élément, ajoutez du code JavaScript à un attribut d'événement HTML :
onclick=JavaScript
Exemples d'événements HTML :
- Lorsqu'un utilisateur clique sur la souris
- Lorsqu'une page Web est chargée
- Lorsqu'une image a été chargée
- Lorsque la souris passe sur un élément
- Lorsqu'un champ de saisie est modifié
- Lorsqu'un formulaire HTML est soumis
- Lorsqu'un utilisateur appuie sur une touche
Dans cet exemple, le contenu de l' <h1>élément est modifié lorsqu'un utilisateur clique dessus :
Exemple
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>
</body>
</html>
Dans cet exemple, une fonction est appelée depuis le gestionnaire d'événements :
Exemple
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Click on this text!</h1>
<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>
</body>
</html>
Attributs d'événement HTML
Pour affecter des événements à des éléments HTML, vous pouvez utiliser des attributs d'événement.
Exemple
Attribuez un événement onclick à un élément de bouton :
<button onclick="displayDate()">Try it</button>
Dans l'exemple ci-dessus, une fonction nommée displayDatesera exécutée lorsque le bouton sera cliqué.
Attribuer des événements à l'aide du DOM HTML
Le DOM HTML vous permet d'affecter des événements à des éléments HTML à l'aide de JavaScript :
Exemple
Attribuez un événement onclick à un élément de bouton :
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
Dans l'exemple ci-dessus, une fonction nommée displayDateest affectée à un élément HTML avec l'extension id="myBtn".
La fonction sera exécutée lorsque le bouton sera cliqué.
Les événements onload et onunload
Les événements onloadet onunloadsont déclenchés lorsque l'utilisateur entre ou quitte la page.
L' onloadévénement peut être utilisé pour vérifier le type et la version du navigateur du visiteur, et charger la version appropriée de la page Web en fonction des informations.
Les événements onloadet onunloadpeuvent être utilisés pour gérer les cookies.
Exemple
<body onload="checkCookies()">
L'événement onchange
L' onchangeévénement est souvent utilisé en combinaison avec la validation des champs de saisie.
Vous trouverez ci-dessous un exemple d'utilisation de onchange. La upperCase()
fonction sera appelée lorsqu'un utilisateur modifie le contenu d'un champ de saisie.
Exemple
<input type="text" id="fname"
onchange="upperCase()">
Les événements onmouseover et onmouseout
Les événements onmouseoveret onmouseoutpeuvent être utilisés pour déclencher une fonction lorsque l'utilisateur survole ou sort d'un élément HTML :
Les événements onmousedown, onmouseup et onclick
Les événements onmousedown, onmouseupet onclickfont tous partie d'un clic de souris. D'abord, lorsqu'un bouton de la souris est cliqué, l'événement onmousedown est déclenché, puis, lorsque le bouton de la souris est relâché, l'événement onmouseup est déclenché, enfin, lorsque le clic de la souris est terminé, l'événement onclick est déclenché.
Plus d'exemples
Modifier une image lorsqu'un utilisateur maintient le bouton de la souris enfoncé.
Affiche une boîte d'alerte lorsque la page a fini de se charger.
Modifie la couleur d'arrière-plan d'un champ de saisie lorsqu'il obtient le focus.
Modifiez la couleur d'un élément lorsque le curseur passe dessus.
Référence d'objet d'événement HTML DOM
Pour une liste de tous les événements HTML DOM, consultez notre référence complète sur les objets d'événement HTML DOM .