HTML DOM - Événements
HTML DOM permet à JavaScript de réagir aux événements HTML.
Réagir aux événements
JavaScript peut être exécuté lorsqu'un événement se produit, par exemple lorsqu'un 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 de l'événement HTML :
Exemples d'événements HTML :
Lorsque l'utilisateur clique sur la souris
Lorsque la page Web est chargée
Lorsque l'image est chargée
Lorsque la souris est déplacée sur l'élément
Lorsque le champ de saisie est modifié
Lorsque le formulaire HTML est soumis
Lorsque l'utilisateur déclenche une pression sur une touche
Dans ce Dans ce cas, lorsque l'utilisateur clique, le contenu de l'élément <h1> sera modifié :
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Dans cet exemple, la fonction est appelée depuis le gestionnaire d'événements :
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
</head>
<head>
<script>
function changetext(id){
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">点击文本!</h1>
</body>
</html> Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Événement HTML attributs
Si nécessaire Pour attribuer des événements aux éléments HTML, vous pouvez utiliser l'attribut event.
Instance
<!DOCTYPE html>
<html>
<html>
<body>
<p>Click the button to execute the <em>displayDate()</em> function.</p>
<button onclick="displayDate()">Try it</button>
<script>
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Dans l'exemple ci-dessus, lorsque le bouton est cliqué, la fonction nommée displayDate sera exécutée.
Utiliser HTML DOM pour attribuer des événements
HTML DOM vous permet d'utiliser JavaScript pour attribuer des événements à des éléments HTML :
Instance
<html><!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Click the button to execute the <em>displayDate()</em> function.</p>
<button id="myBtn">Try it</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html> Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Dans l'exemple ci-dessus, la fonction nommée displayDate est attribué à l'élément HTML avec id=myButn".
Lorsque le bouton est cliqué, la fonction sera exécutée.
événements onload et onunload
Lorsque l'élément L'utilisateur entre ou quitte la page, les événements onload et onunload sont déclenchés. L'événement onload peut être utilisé pour vérifier le type et la version du navigateur du visiteur, afin que différentes versions de la page Web puissent être chargées en fonction de ces informations. des événements sont disponibles. Pour le traitement des cookies
Instance<html><!DOCTYPE html>
<html>
<body onload="checkCookies()">
<script>
function checkCookies()
{
if (navigator.cookieEnabled==true)
{
alert("Cookies are enabled")
}
else
{
alert("Cookies are not enabled")
}
}
</script>
<p>An alert box should tell you if your browser has enabled cookies or not.</p>
</body>
</html>événement onchange
l'événement onchange est souvent utilisé pour la validation des champs de saisie.
L'exemple suivant montre comment utiliser onchange. Lorsque l'utilisateur modifie le contenu du champ de saisie, la fonction upperCase() est appelée.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
</head>
<head>
<script>
function myFunction(){
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
输入你的名字: <input type="text" id="fname" onchange="myFunction()">
<p>当你离开输入框后，函数将被触发，将小写字母转为大写字母。</p>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Événements onmouseover et onmouseout
Les événements onmouseover et onmouseout peuvent être utilisés pour déclencher des fonctions lorsque le pointeur de la souris se déplace vers ou depuis un élément.
Instance
<html><!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>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Les événements onmousedown, onmouseup et onclick
Les événements onmousedown, onmouseup et onclick sont l'ensemble du processus de clic de souris. Tout d'abord, lorsque l'on clique sur un bouton de la souris, l'événement onmousedown est déclenché. Ensuite, lorsque le bouton de la souris est relâché, l'événement onmousedown est déclenché. l'événement onmouseup, et enfin, lorsque le clic de souris est terminé, l'événement onclick est déclenché.
Instance
<html><!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>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Manuel de référence des objets d'événement HTML DOM
Pour une description complète et des exemples de chaque événement, veuillez visiter notre manuel de référence HTML DOM.
