HTML DOM permet à JavaScript de réagir aux événements HTML :
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 :
<!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 :
<!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>
Pour attribuer des événements aux éléments HTML, vous pouvez utiliser les attributs d'événement.
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é.
Le HTML DOM vous permet d'attribuer des événements à des éléments HTML à l'aide de JavaScript :
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
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.
<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
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.
<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
peuvent être utilisés pour déclencher une fonction lorsque l'utilisateur passe la souris sur ou hors d'un élément HTML :
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
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é.
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>
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.
Pour une liste de tous les événements HTML DOM, consultez notre référence complète des objets d'événement HTML DOM.