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 onm ouseover onm ousemove onm ouseleave
21 2 键盘事件 onkeydown onkeyup
22 3 表单事件 onfocus onblur onchange onsubmit onreset
23 4 页面加载事件 onl oad
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" onm ouseover="fun4()" onm ousemove="fun5()" onm ouseleave="fun6()">
105 <br>
106 <input type="text" onkeydown="fun7()" onkeyup="fun8()">
107 </body>
108 </html>
标签：function,10,常见,console,log,绑定,表单,事件 From： https://www.cnblogs.com/IrVolcano/p/18092331