Événements JavaScript HTML DOM
Événement
Un événement est une action effectuée par l'utilisateur ou le navigateur lui-même, telle qu'un clic , Load et mouseover sont tous deux des noms d'événements.
Les événements sont le pont entre javaScript et DOM.
Si vous le déclenchez, je l'exécuterai - lorsque l'événement se produit, sa fonction de gestionnaire est appelée pour exécuter le code JavaScript correspondant afin de donner une réponse.
Des exemples typiques sont : l'événement de chargement est déclenché lorsque la page est chargée ; l'événement de clic est déclenché lorsque l'utilisateur clique sur un élément.
Réagir aux événements
Nous pouvons exécuter 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
Exemples HTML de événements :
Lorsque l'utilisateur clique sur la souris
Lorsque la page Web est chargée
Lorsque l'image est chargée
Lorsque la souris se déplace 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<head>
<script>
function changetext(id){
id.innerHTML="hello";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">点击！</h1>
</body>
</html>Pour attribuer des événements aux éléments HTML, vos propriétés d'événement peuvent être utilisées.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<button onclick="displayDate()">点击</button>
<script>
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>HTML DOM vous permet d'utiliser JavaScript pour attribuer des événements à des éléments HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<head>
</head>
<body>
<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>événements onload et onunload
onload et onunload les événements seront déclenchés lorsque l'utilisateur entre ou quitte la page. L'événement
onload peut être utilisé pour détecter le type et la version du navigateur du visiteur et charger la version correcte de la page Web en fonction de ces informations.
Les événements onload et onunload peuvent être utilisés pour gérer les cookies.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script type="text/javascript">
function load(){
alert("页面加载完成");
}
</script>
</head>
<body onload="load()">
</body>
</html>événement onchange
l'événement onchange est souvent utilisé en conjonction avec la validation des champs de saisie.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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>Événements onmouseover et onmouseout
Les événements onmouseover et onmouseout peuvent être utilisés pour déclencher des fonctions lorsque la souris de l'utilisateur se déplace sur ou hors d'un élément HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:yellow;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){
obj.innerHTML="Thank You"
}
function mOut(obj){
obj.innerHTML="鼠标请移动至此"
}
</script>
</body>
</html>les événements onmousedown, onmouseup et onclick
onmousedown, onmouseup et onclick constituent toutes les parties de l'événement de clic de souris. Tout d'abord, lorsque le bouton de la souris est cliqué, l'événement onmousedown est déclenché, lorsque le bouton de la souris est relâché, l'événement onmouseup est déclenché et enfin, lorsque le clic de la souris est terminé, l'événement onclick est déclenché.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script type="text/javascript">
function noNumbers(e)
{
var keynum;
var keychar;
keynum = window.event ? e.keyCode : e.which;
keychar = String.fromCharCode(keynum);
alert(keynum+':'+keychar);
}
</script>
</head>
<body>
<input type="text" onkeydown="return noNumbers(event)" />
</body>
</html>Autres événements :
onmousedown et onmouseup
Changer une image lorsque l'utilisateur appuie sur le bouton de la souris.
onload
Une fois le chargement de la page terminé, affichez une boîte de dialogue.
onfocus
Modifie la couleur d'arrière-plan d'un champ de saisie lorsqu'il obtient le focus.
Événements de souris
Lorsque le pointeur se déplace sur l'élément, changez sa couleur ; lorsque le pointeur sort du texte, il changera à nouveau de couleur.
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
