10常见事件的绑定 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6     <title>Document</title>
  7 
  8     <script>
  9         /*
 10             事件绑定方式
 11                 1 通过元素的属性绑定
 12                 2 通过DOM编程动态绑定
 13 
 14                 注意事项：
 15                     1 一个事件可以同时绑定多个函数
 16                     2 一个元素可以同时绑定多个事件
 17 
 18             
 19             常见的事件
 20                 1 鼠标事件 onclick ondbclick onmouseover onmousemove onmouseleave
 21                 2 键盘事件 onkeydown onkeyup
 22                 3 表单事件 onfocus onblur onchange onsubmit onreset
 23                 4 页面加载事件 onload
 24             
 25             事件的触发
 26                 1 行为触发
 27                 2 DOM编程触发
 28         */
 29 
 30         function fun1(){
 31             console.log("单机成功")
 32         }
 33         function fun2(){
 34             console.log("单击也成功了")
 35         }
 36         function fun3(){
 37             console.log("双击成功")
 38         }
 39         function fun4(){
 40             console.log("鼠标悬停了")
 41         }
 42         function fun5(){
 43             console.log("鼠标移动了")
 44         }
 45         function fun6(){
 46             console.log("鼠标移开了")
 47         }
 48         function fun7(){
 49             console.log("键盘按键按下了")
 50         }
 51         function fun8(){
 52             console.log("键盘按键抬起了")
 53         }
 54         function testFocus(){
 55             console.log("获得焦点了")
 56         }
 57         function testBlur(){
 58             console.log("失去焦点了")
 59         }
 60         function testChange1(value){
 61             console.log("内容改变为："+value)
 62         }
 63         function testChange2(){
 64             console.log("选项改变了")
 65         }
 66         function testSubmit(){
 67             /*
 68                 弹窗的三种方式
 69                     alert() 信息提示框
 70                     prompt() 信息输入框
 71                     confirm() 信息确认框
 72             */
 73             var flag = confirm("确定要提交表单吗？")
 74             if(!flag){
 75                 //在这里有机会阻止表单提交
 76                 //event.preventDefault()//阻止组件的默认行为
 77                 return false
 78             }
 79             return true
 80         }
 81         function testReset(){
 82             alert("表单要重置了")
 83         }
 84     </script>
 85 
 86 </head>
 87 <body>
 88     
 89     <form action="01js引入方式.html" method="get" onsubmit="return testSubmit()" onreset="testReset">
 90         用户名：<input type="text" name="username" onfocus="testFocus()" onblur="testBlur" onchange="testChange1(this.value)"><br>
 91         登陆账号：<input type="text" name="loginname"><br>
 92         选择籍贯：<select onchange="testChange2()">
 93                      <option>北京</option>
 94                      <option>上海</option>
 95                      <option>广州</option>
 96                  </select><br>
 97         <input type="submit" value="注册">
 98         <input type="reset" value="清空">
 99     </form>
100     
101     <hr>
102     <input type="button" value="按钮" onclick="fun1(),fun2()" ondblclick="fun3()">
103     <br>
104     <img src="../HTML/img/CUMTlogo.jpg" onmouseover="fun4()" onmousemove="fun5()" onmouseleave="fun6()">
105     <br>
106     <input type="text" onkeydown="fun7()" onkeyup="fun8()">
107 </body>
108 </html>

 

posted @ 2024-03-24 13:32  白茶花约  阅读(13)  评论(0)    收藏  举报