Événements HTML DOM JavaScript

HTML DOM permet à JavaScript de réagir aux événements HTML :

Souris au dessus !
Cliquez sur moi

Réagir à un événement

JavaScript peut s'exécuter lors de l'occurrence d'un événement, par exemple lorsque l'utilisateur clique sur un élément HTML.

Pour exécuter du code lorsque l'utilisateur clique sur un élément, ajoutez du code JavaScript à l'attribut d'événement HTML :

onclick =JavaScript

Exemple d'événement HTML :

  • Lorsque l'utilisateur clique sur la souris
  • lorsque la page web est chargée
  • lorsque l'image est chargée
  • lorsque le curseur est déplacé sur l'élément
  • lorsque le champ d'entrée est modifié
  • lorsque le formulaire HTML est soumis
  • lorsque l'utilisateur appuie sur une touche

Dans cet exemple, lorsque l'utilisateur clique sur <h1> lorsque, le contenu est modifié :

Exemple

<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Hello!'">Cliquez sur ce texte !</h1>
</body>
</html>

Essayez-le vous-même

Dans cet exemple, appelez la fonction à partir du gestionnaire d'événement :

Exemple

<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Cliquez sur ce texte !</h1>
<script>
function changeText(id) { 
    id.innerHTML = "Hello:)";
}
</script>
</body>
</html>

Essayez-le vous-même

Attributs d'événement HTML

Pour affecter un événement à un élément HTML, vous pouvez utiliser les attributs d'événement.

Exemple

Affecter à l'élément bouton onclick événement :

<button onclick="displayDate()">Essayez</button>

Essayez-le vous-même

Dans cet exemple, la fonction nommée displayDate est exécutée lorsque le bouton est cliqué.

Affecter des événements en utilisant HTML DOM

HTML DOM vous permet d'affecter des événements aux éléments HTML en utilisant JavaScript :

Exemple

Spécifiez pour l'élément bouton onclick événement :

<script>
document.getElementById("myBtn").onclick = displayDate;
</script>

Essayez-le vous-même

Dans cet exemple, la fonction nommée displayDate est assignée à l'élément HTML avec l'id="myBtn".

lorsque vous cliquez sur un bouton, la fonction est exécutée.

onload et onunload sont déclenchés

Lorsque l'utilisateur entre et quitte la page, les événements onload et onunload événement.

onload Les événements peuvent être utilisés pour détecter le type et la version du navigateur de l'visitateur, puis charger la version appropriée de la page web en fonction de cette information.

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

Exemple

<body onload="checkCookies()">

Essayez-le vous-même

événement onchange

onchange cet événement est souvent utilisé en combinaison avec la validation des champs d'entrée.

Voici un exemple de comment utiliser onchange de l'utilisation. Lorsque l'utilisateur change le contenu du champ d'entrée, la fonction upperCase() est appelée.

Exemple

<input type="text" id="fname" onchange="upperCase()">

Essayez-le vous-même

événements onmouseover et onmouseout

onmouseover et onmouseout Les événements peuvent être utilisés pour déclencher une fonction lorsque l'utilisateur place la souris sur un élément HTML ou la quitte :

Souris au dessus !

Essayez-le vous-même

événements onmousedown, onmouseup et onclick

onmousedown, onmouseup et onclick Les événements constituent un événement de clic complet de la souris.

Premièrement, lorsque le bouton de la souris est cliqué,onmousedown L'événement est déclenché ; puis lorsque le bouton de la souris est libéré,onmouseup L'événement est déclenché ; enfin, après que le clic de la souris soit terminé,onclick L'événement est déclenché.

Cliquez sur moi

Essayez-le vous-même

Plus d'exemples

onmousedown et onmouseup
Changez l'image lorsque l'utilisateur appuie sur le bouton de la souris.
onload
Affichez une boîte de message d'alarme lorsque la page est complètement chargée.
onfocus
Changez la couleur d'arrière-plan du champ d'entrée lorsque le champ reçoit le focus.
Événements souris
Changez la couleur de l'élément lorsque le pointeur est déplacé dessus.

Manuel de référence des objets événement DOM HTML

Pour obtenir une liste complète des événements DOM HTML, veuillez consulter notre Manuel de référence des objets événement DOM HTML.