Événements DOM JavaScript


Table des matières

    Afficher la table des matières


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

Mouse Over Me
Click Me

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 :

onclick=JavaScript

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 l'élément <h1> est modifié lorsqu'un 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 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML Events</h2>
<h2 onclick="this.innerHTML='Ooops!'">Click on this text!</h2>

</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)">Click on this text!</h1>
 
<script>
function changeText(id) {

  id.innerHTML = "Ooops!";
}
</script>

</body>
</html>

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML Events</h2>
<h2 onclick="changeText(this)">Click on this text!</h2>

<script>
function changeText(id) {
  id.innerHTML = "Ooops!";
}
</script>

</body>
</html>


Attributs d'événement HTML

Pour attribuer des événements aux éléments HTML, vous pouvez utiliser les attributs d'événement.

Exemple

Attribuez un événement onclick à un élément bouton :

<button onclick="displayDate()">Try it</button>

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML Events</h2>
<p>Click the button to display the date.</p>

<button onclick="displayDate()">The time is?</button>

<script>
function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}
</script>

<p id="demo"></p>

</body>
</html> 

Dans l'exemple ci-dessus, une fonction nommée displayDate sera exécutée lorsque le bouton est cliqué.


Attribuer des événements à l'aide du DOM HTML

Le HTML DOM vous permet d'attribuer des événements à des éléments HTML à l'aide de JavaScript :

Exemple

Attribuez un événement onclick à un élément bouton :

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

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML Events</h2>
<p>Click "Try it" to execute the displayDate() function.</p>

<button id="myBtn">Try it</button>

<p id="demo"></p>

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

function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}
</script>

</body>
</html> 

Dans l'exemple ci-dessus, une fonction nommée displayDate est affectée à un élément HTML avec le id="myBtn".

La fonction sera exécutée lorsque le bouton est 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()">

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body onload="checkCookies()">

<h2>JavaScript HTML Events</h2>

<p id="demo"></p>

<script>
function checkCookies() {
  var text = "";
  if (navigator.cookieEnabled == true) {
    text = "Cookies are enabled.";
  } else {
    text = "Cookies are not enabled.";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html> 

L'événement onchange

L'événement onchange est souvent utilisé en combinaison avec la validation des champs de saisie.

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.

Exemple

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

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML Events</h2>
Enter your name: <input type="text" id="fname" onchange="upperCase()">
<p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p>

<script>
function upperCase() {
  const x = document.getElementById("fname");
  x.value = x.value.toUpperCase();
}
</script>

</body>
</html>

Les événements onmouseover et onmouseout

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

Mouse Over Me

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" 
style="background-color:#D94A38;width:120px;height:20px;padding:40px;">
Mouse Over Me</div>

<script>
function mOver(obj) {
  obj.innerHTML = "Thank You"
}

function mOut(obj) {
  obj.innerHTML = "Mouse Over Me"
}
</script>

</body>
</html> 

Les événements onmousedown, onmouseup et onclick

Les événements onmousedown, onmouseup et onclick font tous partie d'un clic de souris. Tout d'abord, lorsqu'un bouton de la souris est cliqué, l'événement onmousedown est se déclenche alors lorsque le bouton de la souris est libéré, l'événement onmouseup est déclenché, enfin, lorsque le clic de souris est terminé, l'événement onclick est déclenché.

Click Me

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<div onmousedown="mDown(this)" onmouseup="mUp(this)"
style="background-color:#D94A38;width:90px;height:20px;padding:40px;">
Click Me</div>

<script>
function mDown(obj) {
  obj.style.backgroundColor = "#1ec5e5";
  obj.innerHTML = "Release Me";
}

function mUp(obj) {
  obj.style.backgroundColor="#D94A38";
  obj.innerHTML="Thank You";
}
</script>

</body>
</html> 

Plus d'exemples

onmousedown et onmouseup

<!DOCTYPE html>
<html>
<head>
<script>
function lighton() {
  document.getElementById('myimage').src = "bulbon.gif";
}
function lightoff() {
  document.getElementById('myimage').src = "bulboff.gif";
}
</script>
</head>

<body>

<img id="myimage" onmousedown="lighton()" onmouseup="lightoff()" src="bulboff.gif" width="100" height="180" />

<p>Click mouse and hold down!</p>

</body>
</html>

Modifiez une image lorsqu'un utilisateur maintient le bouton de la souris enfoncé.

en charge

<!DOCTYPE html>
<html>
<head>

<script>
function mymessage() {
  alert("This message was triggered from the onload event");
}
</script>
</head>

<body onload="mymessage()">
</body>

</html>

Afficher une boîte d'alerte lorsque le chargement de la page est terminé.

se concentrer

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(x) {
  x.style.background = "yellow";
}
</script>
</head>
<body>

Enter your name: <input type="text" onfocus="myFunction(this)">

<p>When the input field gets focus, a function is triggered which changes the background-color.</p>

</body>
</html>

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

Événements de souris

<!DOCTYPE html>
<html>
<body>

<h1 onmouseover="style.color='red'"
onmouseout="style.color='black'">
Mouse over this text</h1>

</body>
</html>

Changer la couleur d'un élément lorsque le curseur passe dessus.


Référence des objets d'événement HTML DOM

Pour une liste de tous les événements HTML DOM, consultez notre référence complète des objets d'événement HTML DOM.