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 :

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 la <h1> l’élément est modifié lorsqu’un utilisateur clique dessus :

Dans cet exemple, une fonction est appelée depuis le gestionnaire d’événements :

Attributs d’événement HTML

Pour affecter des événements à des éléments HTML, vous pouvez utiliser des attributs d’événement.

Dans l’exemple ci-dessus, une fonction nommée displayDate sera exécuté 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 :

Dans l’exemple ci-dessus, une fonction nommée displayDate est assigné à 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

Le onload et onunload les événements sont déclenchés lorsque l’utilisateur entre ou quitte la page.

Le 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.

Le onload et onunload les événements peuvent être utilisés pour gérer les cookies.

L’événement onchange

Le onchange L’événement est souvent utilisé en combinaison avec la validation des champs d’entrée.

Vous trouverez ci-dessous un exemple d’utilisation de onchange. Le upperCase()
La fonction sera appelée lorsqu’un utilisateur modifie le contenu d’un champ de saisie.

Les événements onmouseover et onmouseout

Le onmouseover et onmouseout les événements peuvent être utilisés pour déclencher une fonction lorsque l’utilisateur survole ou sort d’un élément HTML :

Passez la souris sur moi

Essayez-le vous-même »

Les événements onmousedown, onmouseup et onclick

Le onmousedown, onmouseupet onclick les événements font 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é.

Cliquez sur moi

Essayez-le vous-même »

Plus d’exemples

onmousedown et onmouseup
Modifier une image lorsqu’un utilisateur maintient le bouton de la souris enfoncé.

en charge
Afficher une boîte d’alerte lorsque la page a fini de se charger.

focus
Modifiez la couleur d’arrière-plan d’un champ de saisie lorsqu’il obtient le focus.

Événements de souris
Changer 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.