forked from liang996/Javascript-Learning-notes
-
Notifications
You must be signed in to change notification settings - Fork 1
/
js事件.txt
133 lines (71 loc) · 2.02 KB
/
js事件.txt
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
115
116
117
118
119
120
121
122
123
124
125
126
1.HTML 事件是发生在 HTML 元素上的“事情”。
当在 HTML 页面中使用 JavaScript 时,JavaScript 能够“应对”这些事件。
2.HTML 事件
HTML 事件可以是浏览器或用户做的某些事情。
下面是 HTML 事件的一些例子:
?HTML 网页完成加载
?HTML 输入字段被修改
?HTML 按钮被点击
通常,当事件发生时,用户会希望做某件事。
JavaScript 允许您在事件被侦测到时执行代码。
通过 JavaScript 代码,HTML 允许您向 HTML 元素添加事件处理程序。
使用单引号:
<element event='一些 JavaScript'>
使用双引号:
<element event="一些 JavaScript">
在下面的例子中,onclick 属性(以及代码)被添加到 <button> 元素:
例子:获取当前时间
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 事件</h1>
<button onclick="document.getElementById('demo").innerHTML=Date()'>
获取当前时间</button>
<p id="demo"></p>
</body>
</html>
在上面的例子中,JavaScript 代码改变了 id="demo" 的元素的内容。
在接下来的例子中,代码(使用 this.innerHTML)改变了其自身元素的内容:
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 事件</h1>
<button onclick="this.innerHTML=Date()'>
获取当前时间</button>
<p id="demo"></p>
</body>
</html>
3.JavaScript 代码通常有很多行。事件属性调用函数更为常见:
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 事件</h1>
<button onclick="a()'>获取当前时间</button>
<script>
function a(){
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>
4.常见HTML事件有:
onclick:点击事件(用户点击了html元素)
onchange:改变事件(HTML元素被改变)
onmouseover:鼠标移入事件(用户把鼠标移动到HTML元素上面)
onmouseout:鼠标移出事件(用户把鼠标从HTML元素上面移出)
onkeydown:用户按下键盘
onload:页面被加载完成事件
5.JavaScript 能够做什么?
事件处理程序可用于处理、验证用户输入、用户动作和浏览器动作:
?每当页面加载时应该做的事情
?当页面被关闭时应该做的事情
?当用户点击按钮时应该被执行的动作
?当用户输入数据时应该被验证的内容
?等等
让 JavaScript 处理事件的不同方法有很多:
?HTML 事件属性可执行 JavaScript 代码
?HTML 事件属性能够调用 JavaScript 函数
?您能够向 HTML 元素分配自己的事件处理函数
?您能够阻止事件被发送或被处理
?等等