-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathJS常用事件.html
114 lines (90 loc) · 3.63 KB
/
JS常用事件.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS常用事件</title>
</head>
<!--
load事件：
1. load事件不是在页面加载过程中触发的。
2. load事件是在页面中所有元素全部加载完毕之后才会发生的。
-->
<body onload="console.log('页面加载完毕了，load事件发生了！')">
<!--
JS中有哪些常见的事件：
(1) blur失去焦点
(2) focus获得焦点
(3) click鼠标单机
(4) dblclick鼠标双击
(5) change下拉列表选中项改变，或文本框内容改变
(6) keydown键盘按下
(7) keyup键盘弹起
(8) load页面加载完毕
(9) mousedown鼠标按下
(10) mouseover鼠标经过
(11) mousemove鼠标移动
(12) mouseout鼠标离开
(13) mouseup鼠标弹起
(14) reset表单重置
(15) submit表单提交
(16) select文本被选定
-->
select(文本被选定)事件：
<textarea rows="10" cols="30"onselect="console.log('文本被选中了')">文本(此时的文本会在文本框中显示，且可以被修改)</textarea>
<input type="text" onselect="console.log('文本被选中了')"/>
<br>
测试表单提交(submit)和重置事件(reset)
<!--
action="" 里边什么也不写，代表当前页面的路径，
action="https://www.baidu.com" 代表提价到百度。
按照以下这样写，点击提交按钮，首先会跳出弹窗，（表单提交了），之后会跳转百度到百度界面。
<form action="https://www.baidu.com" onsubmit="alert('表单提交了')" onreset="alert('表单重置了')">
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</form>
-->
<form onreset="alert('表单重置了')" onsubmit="alert('表单提交了')" >
<input type="text" />
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</form>
blur(失去焦点)事件：
<input type="text" onblur="console.log('失去焦点了！')"/>
<br>
<!-- change事件：下拉列表项被改变时发生-->
change(下拉列表选中项改变，或文本框内容改变)事件：
<select name="garde" onchange="console.log('下拉列表发生改变了')">
<option value ="1">请选择您的学历</option>
<option value="gz">高中</option>
<option value ="zk">专科</option>
<option value ="bk">本科</option>
</select>
<br>
click(鼠标单机)事件：
<input type="button" value="鼠标单机" onclick="console.log('鼠标单机了')" />
<br>
dblclick(鼠标双击)事件：
<input type="button" value="鼠标双击" ondblclick="console.log('鼠标双击了！')"/>
<br>
focus(获得焦点)事件：
<input type="text" onfocus="console.log('获取到了焦点！')"/>
<br>
keydown(键盘按下)和keyup(键盘弹起)事件：
<input type="text" onkeydown="console.log('键盘按下了')" onkeyup="console.log('键盘弹起了')"/>
<br>
mousemove(鼠标移动)事件：
<input type="text" onmousemove="console.log('鼠标移动了！')"/>
<br>
mouseout(鼠标离开)事件：
<input type="button" onmouseout="console.log('鼠标离开了！')"/>
<input type="text" value="鼠标离开" onmouseout="alert('鼠标离开了文本框')" />
<br>
测试鼠标全部事件（在一个div中）:
<div id="mouseDiv" onmousemove="console.log('鼠标经过了')"
onmousedown="console.log('鼠标按下了')"
onmouseout="console.log('鼠标离开了')"
onmouseup="console.log('鼠标弹起了')"
onmousemove="console.log('鼠标移动了')">
</div>
</body>
</html>