Événements DOM HTML JavaScript
Le DOM HTML permet à JavaScript de réagir aux événements HTML :
Réagir aux Événements
Un script JavaScript peut être exécuté lorsqu'un événement se produit, comme lorsque l'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 :
- Lorsque l'utilisateur clique avec la souris
- Lorsque la page web est chargée
- Lorsque une image est chargée
- Lorsque la souris se déplace sur un élément
- Lorsque un champ de saisie est modifié
- Lorsque un formulaire HTML est soumis
- Lorsque un utilisateur appuie sur une touche
Dans cet exemple, le contenu de l'élément <h1> est modifié lorsque l'utilisateur clique dessus :
Exemple
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Oups!'">Cliquez sur ce texte !</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)">Cliquez sur ce texte !</h1>
<script>
function changeText(id) {
id.innerHTML = "Oups !";
}
</script>
</body>
</html> Attributs d'Événements HTML
Pour attribuer des événements aux éléments HTML, vous pouvez utiliser des attributs d'événements.
Exemple
Attribuez un événement onclick à un élément bouton :
<button onclick="displayDate()">Essayez-le</button> Dans l'exemple ci-dessus, une fonction nommée displayDate sera exécutée lorsque le bouton sera cliqué.
Attribuer des Événements en Utilisant le DOM HTML
Le DOM HTML vous permet d'attribuer des événements aux éléments HTML en utilisant JavaScript :
Exemple
Attribuez un événement onclick à un élément bouton :
<script>
document.getElementById("myBtn").onclick = displayDate;
</script> Dans l'exemple ci-dessus, une fonction nommée displayDate est attribuée à un élément HTML avec le id="myBtn" .
La fonction sera exécutée lorsque le bouton sera cliqué.
Les Événements onload et onunload
Les événements onload et onunload sont déclenchés lorsque l'utilisateur entre ou quitte la page.
L'événement onload 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 onload et onunload peuvent être utilisés pour gérer les cookies.
Exemple
<body onload="checkCookies()"> L'Événement oninput
L'événement oninput est souvent utilisé pour effectuer une action pendant que l'utilisateur saisit des données.
Ci-dessous un exemple de comment utiliser oninput pour changer le contenu d'un champ de saisie.
Exemple
<input type="text" id="fname" oninput="upperCase()"> L'Événement onchange
L'événement onchange est souvent utilisé en combinaison avec la validation des champs de saisie.
Ci-dessous un exemple de comment utiliser onchange. La fonction upperCase() sera appelée lorsque l'utilisateur change le contenu d'un champ de saisie.
Exemple
<input type="text" id="fname" onchange="upperCase()"> Les Événements onmouseover et onmouseout
Les événements onmouseover et onmouseout peuvent ê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 , onmouseup , et onclick sont tous des parties d'un clic de souris. D'abord, lorsque le 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 souris est terminé, l'événement onclick est déclenché.
Plus d'Exemples
onmousedown et onmouseup
Changez une image lorsque l'utilisateur maintient le bouton de la souris enfoncé.
onload
Affichez une boîte d'alerte lorsque la page a fini de charger.
onfocus
Changez la couleur de fond d'un champ de saisie lorsqu'il reçoit le focus.
Événements de Souris
Changez la couleur d'un élément lorsque le curseur se déplace dessus.
Référence de l'Objet d'Événement DOM HTML
Pour une liste de tous les événements DOM HTML, consultez notre Référence de l'Objet d'Événement DOM HTML complète.