HTML DOM permet JavaScript afin de réagir aux événements HTML:
Réagissant aux événements
Un JavaScript peut être exécuté lorsqu'un événement se produit, comme quand un utilisateur clique sur un élément HTML.
Pour exécuter du code lorsque l'utilisateur clique sur un élément, ajouter du code JavaScript à un attribut d'événement HTML:
onclick=JavaScript
Exemples d'événements HTML:
- Lorsqu'un utilisateur clique sur la souris
- Quand une page Web a été chargé
- Quand une image a été chargée
- Lorsque la souris se déplace sur un élément
- Lorsqu'un champ d'entrée est changé
- Quand un formulaire HTML est soumis
- Lorsqu'un utilisateur caresse une touche
Dans cet exemple, le contenu de la balise <h1> élément est modifié lorsque l'utilisateur clique dessus:
Exemple
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>
</body>
</html>
Essayez - le vous - même » Dans cet exemple, une fonction est appelée à partir du 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>
Essayez - le vous - même » Attributs HTML événement
Pour affecter des événements au format HTML éléments que vous pouvez utiliser des attributs d'événement.
Exemple
Attribuer un événement onclick à un élément de bouton:
<button onclick="displayDate()">Try it</button>
Essayez - le vous - même » Dans l'exemple ci - dessus, une fonction nommée displayDate sera exécutée lorsque le bouton est cliqué.
Attribuer des événements Utilisation du DOM HTML
Le code HTML DOM vous permet d'attribuer des événements à des éléments HTML en utilisant JavaScript:
Exemple
Attribuer un événement onclick à un élément de bouton:
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
Essayez - le vous - même » Dans l'exemple ci - dessus, une fonction nommée displayDate est affecté à un élément HTML avec l' id="myBtn" .
La fonction sera exécutée lorsque le bouton est cliqué.
Les onload et onunload Events
Les onload et onunload événements sont déclenchés lorsque l'utilisateur entre ou quitte la page.
Le onload événement peut être utilisé pour vérifier le type de navigateur et la version navigateur du visiteur, et de charger la bonne version de la page Web sur la base des informations.
Les onload et onunload événements peuvent être utilisés pour traiter les cookies.
Le onchange événement
Le onchange événement est souvent utilisé en combinaison avec la validation des champs de saisie.
Voici un exemple de la façon d'utiliser le onchange . Le upperCase() fonction sera appelée lorsqu'un utilisateur modifie le contenu d'un champ de saisie.
Les onmouseover et onmouseout Events
Le onmouseover et onmouseout événements peut être utilisé pour déclencher une fonction lorsque l'utilisateur passe la souris sur, ou sur, un élément HTML:
Le onmousedown , onmouseup et onclick Events
Le onmousedown , onmouseup et onclick événements sont toutes parties d'un clic de souris. Tout d' abord quand un bouton de la souris est cliqué, le onmousedown événement est déclenché, puis, lorsque le bouton de la souris est relâché, le onmouseup événement est déclenché, enfin, lorsque la souris-clic est terminée, le onclick événement est déclenché.
Autres exemples
onmousedown et onmouseup
Modifier une image lorsqu'un utilisateur maintient le bouton de la souris.
en charge
Afficher un message d'alerte lorsque la page a fini de charger.
onfocus
Changer la couleur d'arrière plan d'un champ d'entrée quand il est le focus.
Événements de la souris
Changer la couleur d'un élément lorsque le curseur se déplace au-dessus.
HTML DOM Event Object Reference
Pour une liste de tous les événements HTML DOM, consultez notre complète HTML DOM Event Object Reference .
Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 »