Qu'est-ce qu'un événement
JavaScript crée des pages dynamiques. Les événements sont des comportements pouvant être détectés par JavaScript. Chaque élément d'une page Web peut générer certains événements pouvant déclencher des fonctions ou des procédures JavaScript.
1. Événement de clic de souris (onclick)
onclick est un événement de clic de souris, qui se produit lorsque la souris est cliquée sur une page Web. Dans le même temps, le bloc de programme appelé par l'événement onclick sera exécuté, généralement utilisé avec des boutons.
Exemple : Lorsque l'on clique sur le bouton, l'événement onclick est déclenché et la fonction add2() de la somme de deux nombres est appelée.
<html>
<head>
<script type="text/javascript">
function add2(){
var numa,numb,sum;
numa=6;
numb=8;
sum=numa+numb;
document.write("两数和为:"+sum); }
</script>
</head>
<body>
<form>
<input name="button" type="button" value="点击提交" onclick="add2()" />
</form>
</body>
</html>
Copier après la connexion
Remarque : Si vous utilisez des événements dans une page Web, définissez l'attribut d'événement dans l'élément.
2. Passez la souris sur l'événement (onmouseover)
Événement Mouse over. Lorsque la souris se déplace sur un objet, l'objet déclenche l'événement onmouseover et exécute le programme appelé par l'événement onmouseover.
Lorsque la souris passe sur le bouton "OK", la fonction message() est appelée et la boîte de dialogue de message apparaît.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 鼠标经过事件 </title>
<script type="text/javascript">
function message(){
confirm("请输入密码后，再单击确定!"); }
</script>
</head>
<body>
<form>
密码:
<input name="password" type="password" >
<input name="确定" type="button" value="确定" onmouseover="message()"/>
</form>
</body>
</html>
Copier après la connexion
3. Événement Mouse Out (onmouseout)
Événement de déplacement de la souris, lorsque la souris s'éloigne de l'objet actuel, le programme appelé onmouseout est exécuté.
Lorsque la souris s'éloigne du bouton "Cliquez sur moi", la fonction message() est appelée et une boîte de dialogue de message apparaît.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标移开事件 </title>
<script type="text/javascript">
function message(){
alert("不要移开，点击后进行慕课网!"); }
</script>
</head>
<body>
<form>
<a href="http://www.imooc.com" onmouseout="message()">点击我</a>
</form>
</body>
</html>
Copier après la connexion
4. Événement de focus du curseur (onfocus)
Lorsqu'un objet de la page Web obtient le focus, le programme qui effectue l'appel onfocus est exécuté.
Lorsque la liste déroulante obtient le focus, appelez la fonction message() et une boîte de dialogue apparaîtra : « Veuillez sélectionner votre profession actuelle ! ».
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 光标聚焦事件 </title>
<script type="text/javascript">
function message(){
alert("请选择，您现在的职业！");
}
</script>
</head>
<body>
请选择您的职业：<br>
<form>
<select name="career" onfocus="message()">
<option>学生</option>
<option>教师</option>
<option>工程师</option>
<option>演员</option>
<option>会计</option>
</select>
</form>
</body>
</html>
Copier après la connexion
5. Événement flou (flou)
L'événement onblur et onfocus sont des événements relatifs. Lorsque le curseur quitte l'objet actuellement focalisé, l'événement onblur est déclenché et le programme appelé est exécuté en même temps.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 失焦事件 </title>
<script type="text/javascript">
function message(){
alert("请确定已输入密码后，在移开!"); }
</script>
</head>
<body>
<form>
用户:
<input name="username" type="text" value="请输入用户名！" >
密码:
<input name="password" type="text" value="请输入密码！" onblur="message()">
</form>
</body>
</html>
Copier après la connexion
6. Événement de sélection de contenu (onselect)
Événement Select, lorsque le texte dans la zone de texte ou le champ de texte est sélectionné, l'événement onselect est déclenché et le programme appelé sera exécuté.
Lorsque le texte de la zone de texte du profil personnel est sélectionné, l'événement onselect est déclenché et une boîte de dialogue apparaît.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 内容选中事件 </title>
<script type="text/javascript">
function message(){
alert("您触发了选中事件！"); }
</script>
</head>
<body>
<form>
个人简介：<br>
<textarea name="summary" cols="60" rows="5" onselect="message()">请写入个人简介，不少于200字！</textarea>
</form>
</body>
</html>
Copier après la connexion
7. Événement de changement de contenu de la zone de texte (onchange)
Déclenchez l'événement onchange en modifiant le contenu de la zone de texte et exécutez le programme appelé en même temps.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 文本框内容改变事件 </title>
<script type="text/javascript">
function message(){
alert("您改变了文本内容！"); }
</script>
</head>
<body>
<form>
个人简介：<br>
<textarea name="summary" cols="60" rows="5" onchange="message()">请写入个人简介，不少于200字！</textarea>
</form>
</body>
</html>Copier après la connexion
8. Chargement de l'événement (onload)
L'événement se produira immédiatement après le chargement de la page et le programme appelé sera exécuté en même temps.
Remarque : 1. Lorsque la page est chargée, l'événement onload est déclenché et l'événement est écrit dans la balise
2. La page de chargement de cette section peut être comprise comme l'ouverture d'une nouvelle page.
Dans le code suivant, lorsqu'une nouvelle page est chargée, une boîte de dialogue "Chargement, veuillez patienter..." apparaît.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 加载事件 </title>
<script type="text/javascript">
function message(){
alert("加载中，请稍等…"); }
</script>
</head>
<body onload="message()">
欢迎学习JavaScript。
</body>
</html>
Copier après la connexion
9. Événement de déchargement (onunload)
Lorsque l'utilisateur quitte la page (fermeture de la page, actualisation de la page, etc.), l'événement onUnload est déclenché et le programme appelé est exécuté en même temps.
Remarque : différents navigateurs prennent en charge différemment les événements onunload.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 卸载事件 </title>
<script type="text/javascript">
window.onunload = onunload_message;
function onunload_message(){
alert("您确定离开该网页吗？");
}
</script>
</head>
<body onunload="onunload_message">
欢迎学习JavaScript。
</body>
</html>
Copier après la connexion
Les résultats du test montrent qu'il n'est exécuté que dans le navigateur IE et pas dans d'autres navigateurs.
Ce qui précède sont les neuf états de réponse aux événements Javascript. J'espère que cela sera utile à l'apprentissage de chacun.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
