5.2常见事件演示

深碍√TFBOYSˉ_ 2023-09-30 18:25 22阅读 0赞

鼠标事件

97c14106cd404cb80b98ac20060c62bc.png

<!DOCTYPE html>

键盘事件

9b4cc1f22cf68a3a613124a2f4c29bbe.png

  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="UTF-8">
  5.                 <title></title>
  6.                 <script>
  7.                         function fun1(){
  8.                                 console.info("按钮按下")
  9.                         }
  10.                         function fun2(){
  11.                                 console.info("按钮抬起")
  12.                         }
  13.                         function fun3(){
  14.                                 console.info("按钮按下并抬起")
  15.                         }
  16.                 </script>
  17.         </head>
  18.         <body>
  19.                 <input type="text" onkeydown="fun1()" onkeyup="fun2()" onkeypress="fun3()" />
  20.         </body>
  21. </html>

cd011e4729d8202cdfe575cbfc363ad8.gif

3caf19f2f7fbf6133deb970724bb4304.gif

表单事件

b55aac5b51e02b552b9e049820052140.png

  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="UTF-8">
  5.                 <title></title>
  6.                 <script>
  7.                         function fun1(){console.log("获得焦点");}
  8.                         function fun2(){console.log("失去焦点");}
  9.                         function fun3(){console.log("正在输入");}// 只要输入了,就会触发
  10.                         function fun4(){console.log("内容改变");}// 内部信息发生变化的同时,要失去焦点
  11.                         function fun5(sel){console.log("内容发生改变了"+sel.value)}
  12.                         function fun6(){
  13.                                 alert("发生了提交事件");
  14.                                 // 做了一些运算之后 动态决定表单能否提交
  16.                                 return false ;
  17.                         }
  18.                         function fun7(){ 
  19.                                 console.log("发生了重置事件");
  20.                                 return true;
  21.                         }
  22.                 </script>
  23.         </head>
  24.         <body>
  25.                 <form method="get"  action="https://www.baidu.com" onsubmit="return fun6()" onreset="return fun7()">
  26.                         <input name=""  value=""  type="text" onfocus="fun1()" onblur="fun2()" oninput="fun3()" onchange="fun4()"/><br />
  27.                         <select name="city" onchange="fun5(this)">
  28.                                 <option selected>-请选择城市-</option>
  29.                                 <option value="1">北京</option>
  30.                                 <option value="2">天津</option>
  31.                                 <option value="3">上海</option>
  32.                                 <option value="4">重庆</option>
  33.                         </select>
  34.                         <br />
  35.                         <input type="submit" value="提交数据" />
  36.                         <input type="reset"  value="重置数据" />
  38.                 </form>
  39.         </body>
  40. </html>

20f11e735e27735f957ce6bc37dba60d.gif

3bf70eb6b98e18ad7cbcd2f6809d4375.gif

页面加载事件

  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="UTF-8">
  5.                 <title></title>
  6.                 <script>
  8.                         function testFun(){
  9.                                 var in1=document.getElementById("i1");
  10.                                 var v1=in1.value;
  11.                                 console.log(v1)
  12.                         }
  14.                 </script>
  15.         </head>
  16.         <body onload="testFun()">
  17.                 <input type="text" value="测试文字" id="i1" />
  18.         </body>
  19. </html>

3afdb25cf300735df4cbaf99bae7fafd.gif

d4dc675d266cad6d0ddc9b893f0c967c.gif

发表评论

表情：
评论列表 （有 0 条评论，22人围观）

还没有评论，来说两句吧...

相关阅读