JavaScript Événements HTML DOM
HTML DOM permet à JavaScript de réagir aux événements HTML.
Exemples
Réagir aux événements
Nous pouvons exécuter JavaScript lorsqu'un événement se produit, par exemple 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 :
Exemples d'événements HTML :
- Lorsque l'utilisateur clique avec la souris
- Lorsqu'une page web a été 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 déclenche un appui sur une touche
Dans cet exemple, lorsque l'utilisateur clique sur l'élément <h1>, son contenu change :
Exemples
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">Cliquez sur le texte !</h1>
</body>
</html>
Essayez-le vous-même »
Cet exemple appelle une fonction depuis le gestionnaire d'événements :
Exemples
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Cliquez sur le texte !</h1>
</body>
</html>
Essayez-le vous-même »
Attributs d'événements HTML
Pour assigner des événements à des éléments HTML, vous pouvez utiliser des attributs d'événements.
Exemples
Assignez un événement onclick à un élément button :
Essayez-le vous-même »
Dans l'exemple ci-dessus, la fonction nommée displayDate sera exécutée lorsque le bouton est cliqué.
Affecter des événements à l'aide du DOM HTML
Le DOM HTML vous permet d'assigner des événements aux éléments HTML à l'aide de JavaScript :
Exemples
Assignez un événement onclick à un élément button :
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>
Essayez-le vous-même »
Dans l'exemple ci-dessus, la fonction nommée displayDate est assignée à l'élément HTML avec id="myBtn".
La fonction JavaScript sera exécutée lorsque le bouton est cliqué.
É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 détecter le type et la version du navigateur du visiteur, et charger la version appropriée de la page Web en fonction de ces informations.
Les événements onload et onunload peuvent être utilisés pour gérer les cookies.
Événement onchange
L'événement onchange est souvent utilisé en combinaison avec la validation des champs de saisie.
Voici un exemple d'utilisation de onchange. Lorsque l'utilisateur modifie le contenu d'un champ de saisie, la fonction upperCase() est appelée.
Événements onmouseover et onmouseout
Les événements onmouseover et onmouseout peuvent être utilisés pour déclencher des fonctions lorsque la souris de l'utilisateur passe sur ou sort d'un élément HTML.
Événements onmousedown, onmouseup et onclick
onmousedown, onmouseup et onclick constituent toutes les parties d'un événement de clic de souris. D'abord, lorsque le bouton de la souris est cliqué, l'événement onmousedown est déclenché ; 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é.
Exemples
Un exemple simple onmousedown-onmouseup :
Plus d’exemples
onmousedown et onmouseup
Remplace une image lorsque l'utilisateur appuie sur le bouton de la souris.
onload
Affiche une boîte de dialogue de saisie lorsque la page a fini de charger.
onfocus
Change la couleur d'arrière-plan d'un champ de saisie lorsqu'il reçoit le focus.
Événements de souris
Change la couleur d'un élément lorsque le pointeur le survole ; lorsque le pointeur sort du texte, change à nouveau sa couleur.