Maison > Article > interface Web > Organiser l'étude de réponse aux événements Javascript notes_javascript skills

Organiser l'étude de réponse aux événements Javascript notes_javascript skills

WBOYoriginal: 2016-05-16 15:28:111400parcourir

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>

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>

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>

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>

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>

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>

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>

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 6c04bd5ca3fcae76e30b72ad730ca86d
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>

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>

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.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Méthode simple jQuery pour obtenir un effet de texte d'invite gris dans le texte d'entrée box_jqueryArticle suivant：Méthode simple jQuery pour obtenir un effet de texte d'invite gris dans le texte d'entrée box_jquery

Articles Liés

Voir plus