Événements JavaScript HTML DOM
HTML DOM donne à JavaScript la possibilité de réagir aux événements HTML.
Réagir aux événements
Nous pouvons exécuter du JavaScript 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 à un attribut d'événement HTML :
onclick=JavaScript
Exemple 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 cet exemple, lorsque l'utilisateur clique, le contenu de l'élément <h1> sera modifié :
<!doctype html>
<html>
<meta charset="utf-8">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<h1 onclick="this.innerHTML='hello!'">点我点我点我!</h1>
</body>
</html>
Dans cet exemple, la fonction sera appelée depuis le gestionnaire d'événements :
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<script>
function changetext(id)
{
id.innerHTML="hello!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">请点击这段文本！</h1>
</body>
</html> Attribut d'événement HTML
Pour attribuer un événement à un élément HTML, vous pouvez utiliser l'attribut d'événement.
Attribuez un événement onclick à l'élément bouton :
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<p>点击按钮来执行 <b>displayDate()</b> 函数。</p>
<button onclick="displayDate()">试一试</button>
<script>
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>Dans l'exemple ci-dessus, lorsque l'on clique sur le bouton, une fonction nommée displayDate est exécutée.
Utilisez HTML DOM pour attribuer des événements
HTML DOM vous permet d'utiliser JavaScript pour attribuer des événements aux éléments HTML :
Attribuez des événements onclick aux éléments de bouton :
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
</head>
<body>
<p>点击按钮来执行 <b>displayDate()</b> 函数。</p>
<button id="myBtn">试一试</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html> Dans l'exemple ci-dessus, la fonction nommée displayDate est affectée à l'élément HTML avec id=myButn".
Lorsque vous cliquez sur le bouton, la fonction sera exécutée.
onload et onunload events
Les événements Onload et onunload sont déclenchés lorsqu'un 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 afin que les différentes versions de la page Web soient disponibles. peut être chargé en fonction de ces informations.
les événements onload et onunload peuvent être utilisés pour gérer les cookies
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body onload="checkCookies()">
<script>
function checkCookies()
{
if (navigator.cookieEnabled==true)
{
alert("Cookies are enabled")
}
else
{
alert("Cookies are not enabled")
}
}
</script>
<p>弹出的提示框会告诉你浏览器是否已启用 cookie。</p>
</body>
</html>événement onchange
l'événement onchange est souvent utilisé pour la validation du champ de saisie.
L'exemple suivant montre comment utiliser onchange. La fonction upperCase() est appelée lorsque l'utilisateur modifie le contenu du champ de saisie. Les événements onmouseover et onmouseout peuvent être utilisés lorsque le pointeur de la souris se déplace vers ou s'éloigne. .
Un exemple simple onmouseover-onmouseout :
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<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>événements onmousedown, onmouseup et onclick
.
Les événements Onmousedown, onmouseup et onclick représentent l'ensemble du processus de clic de souris. Tout d'abord, lorsque vous cliquez 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 onmouseup est déclenché. Enfin, lorsque le clic de la souris est terminé, l'événement onclick est déclenché.
Un exemple simple onmousedown-onmouseup :
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<div onmouseover="mOver(this)"
onmouseout="mOut(this)"
style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;">
Mouse Over Me
</div>
<script>
function mOver(obj)
{
obj.innerHTML="谢谢你"
}
function mOut(obj)
{
obj.innerHTML="把鼠标指针移动到上面"
}
</script>
</body>
</html>
section suivante