事件机制
解释：当我们的行为动作满足了一定的条件后，会触发某类事务的执行。作用：主要是结合js的函数来使用。
单双击事件
- 单击：onclick 当鼠标单击的时候会触发
- 双击：ondblclick 当鼠标双击的时候会被触发
鼠标事件
- onmouseover 当鼠标悬停在某个HTML元素上的时候触发
- onmousemove 当鼠标在某个HTML元素上移动的时候触发
- onmouseout 当鼠标在某个HTML元素上移出的时候触发
键盘事件
- onkeyup 当键盘在某个HTML元素上弹起的时候触发
- onkeydown 当键盘在某个HTML元素上下压的时候触发
焦点事件
- onfocus 当某个HTML元素获取焦点的时候触发
- onblur 当某个HTML元素失去焦点的时候触发
页面加载事件
注意
- js中添加事件的第一种方式：
- 在HTML上直接使用事件属性进行添加，属性值为所监听执行的函数。
- js中的事件只有在当前HTML元素上有效。
- 一个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
| <html>
<head>
<title>js的事件机制学习1</title>
<meta charset="UTF-8"/>
<script type="text/javascript">
function testOnclick(){
alert("我是单击");
}
function testOndblclick(){
alert("我是双击");
}
function testOnmouseover(){
alert("我是鼠标悬停事件");
}
function testOnmousemove(){
alert("我被移动了");
}
function testOnmouseout(){
alert("我被移出了");
}
function testOnkeyup(){
alert("我是键盘弹起事件");
}
function testOnkeydown(){
alert("我是键盘按下事件");
}
function testOnfocus(){
document.getElementById("showdiv").innerHTML="哈哈";
alert("我是获取焦点事件");
}
function testOnblur(){
alert("我是失去焦点事件");
}
function testOnload(){
alert("我是页面加载事件");
}
function test(){
alert("测试一个事件的多个函数执行");
}
</script>
<style type="text/css">
#showdiv{
width: 300px;
height: 300px;
border: solid 1px;
}
</style>
</head>
<body onload="testOnload()">
<h3>js的事件机制学习1</h3>
<hr />
<input type="button" name="" id="" value="测试单击" onclick="testOnclick();test();" />
<input type="button" name="" id="" value="测试双击" ondblclick="testOndblclick();" />
<hr />
<br /><br />
<div id="showdiv" onmouseover="testOnmouseover();" onmousemove="testOnmousemove()" onmouseout="testOnmouseout()">
</div>
<hr />
键盘事件学习： <br />
键盘弹起事件：<input type="text" name="" id="" value="" onkeyup="testOnkeyup();"/><br /><br />
键盘下压事件： <input type="text" name="" id="" value="" onkeydown="testOnkeydown()"/>
<hr />
焦点事件学习：<br />
获取焦点： <input type="text" name="" id="" value="" onfocus="testOnfocus();"/><br /><br />
失去焦点： <input type="text" name="" id="" value="" onblur="testOnblur();"/>
</body>
</html>
|
事件机制学习
- 给合适的HTML标签添加合适的事件
- onchange—-select下拉框
- onload——body标签
- 单双击——-用户会进行点击动作的HTML元素
- 鼠标事件——用户会进行鼠标移动操作的。
- 键盘事件——用户会进行键盘操作的HTML元素。
- 给HTML元素添加多个事件时，注意事件之间的冲突
- 举个栗子：单击和双击
- 当事件的触发条件包含相同部分的时候，会产生事件之间的冲突。
- 事件的阻断
- 当事件所监听的函数的将返回值返回给事件时：
- false：则会阻断当前事件所在的HTML标签的功能
- true:则继续执行当前事件所在的HTML标签的功能
- 超链接调用js函数
- <-a href=”javascript:函数名()”>调用js函数<-/a>
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
| <html>
<head>
<title>js的事件机制二</title>
<meta charset="UTF-8"/>
<script type="text/javascript">
function testOnchange(){
alert("我被改变了");
}
function testOnclick(){
alert("今天天气真好，不冷不热，贼适合学习");
}
function testOndblclick(){
alert("老师说的对");
}
function testA(){
alert("事件的阻断");
return true;
}
function testHref(){
alert("我是超链接调用");
}
</script>
</head>
<body>
<h3>js的事件机制二</h3>
<hr />
值改变事件: <input type="text" name="" id="" value="" onchange="testOnchange();"/>
<br /><br />
<select name="" id="" onchange="testOnchange();">
<option value="">北京</option>
<option value="">上海</option>
<option value="">广州</option>
</select>
<hr />
事件的冲突：<br />
<input type="button" name="" id="" value="事件的冲突" onclick="testOnclick()" ondblclick="testOndblclick()"/>
<hr />
事件的阻断：<br />
<a href="http://www.baidu.com" target="_blank" onclick="return testA()">百度一下</a>
<hr />
超链接调用js函数:
<a href="javascript:testHref()">调用js函数</a>
</body>
</html>
|
