警告
本文最后更新于 2020-09-29 01:06，文中内容可能已过时。
1. 基本事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">点我</button>
<script>
// 事件三要素：事件源、触发事件类型(如何触发的，鼠标点击、经过、按下)、事件处理程序
// 1.获取元素
var btn = document.getElementById("btn");
// 2.绑定事件。// 3.事件处理程序
btn.onclick = function(e){alert("厉害了")} // e代表的是事件对象,可以看到事件的详细信息,console.dir(e)可以看到所有属性
</script>
</body>
</html>
|
常见鼠标事件
1
2
3
4
5
6
7
8
| onclick 鼠标点击左键触发
onmouseover 鼠标经过触发
onmouseout 鼠标离开触发
onfocus 获得鼠标焦点触发
onblur 失去鼠标焦点触发
onmousemove 鼠标移动触发
onmouseup 鼠标松开触发
onmousedown 鼠标按下触发
|
2.事件侦听器
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">监听事件</button>
<script>
// 注册时间的两种方式
// 传统注册方式：同一个元素同一个事件只能设置一个处理函数，最后绑定的处理函数会覆盖前面注册的
// 方法监听方式：addEventListener()方法向指定元素添加事件句柄。IE9之前用attachEvent().
// 同一个元素同一个事件可以注册多个事件侦听器，按注册顺序执行
// 添加事件侦听器
// 获取按钮元素
var btn = document.querySelector("#btn")
// 1. 监听事件类型 不带on
// 2. 下面的示例中满足 同一个元素(btn)、同一个事件(click)添加多个侦听器
btn.addEventListener("click", e1)
function e1(){
alert("我是第一个click事件")
// 删除事件,使用匿名函数则无法删除
btn.removeEventListener("click",e1)
}
btn.addEventListener("click",function(){alert("我是第二个click事件")})
</script>
</body>
</html>
|
3.DOM事件流
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程就是DOM事件流
比如我们给一个div注册了点击事件,会按照下面的顺序执行:
捕获阶段: Document–>element html–>element body–>element div
当前目标阶段: element div
冒泡阶段: element div–>Document–>element html–>element body
JS代码只会执行捕获阶段和冒泡阶段其中一个
addEventListener方法的第三个参数为false就是冒泡阶段，为true就是捕获阶段
onclick和attachEvent只能的到冒泡阶段
有些事件没有冒泡noblur、onfocus、onmouseenter、onmouseleave
下面是冒泡阶段示例，当点击son盒子的时候，parent、html和document也会依次触发相应事件
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
overflow: hidden;
height: 400px;
width: 400px;
margin: 100px auto;
background-color: skyblue;
}
.son {
margin: 125px auto;
height: 150px;
width: 150px;
background-color: red;
}
</style>
</head>
<body>
<div class="parent">
<div class="son"></div>
</div>
<script>
// son绑定事件
var son = document.querySelector('.son')
son.addEventListener('click',function(e){
alert("son")
})
//parent绑定事件
var parent = document.querySelector('.parent')
parent.addEventListener('click',function(e){
alert("parent")
})
//document绑定事件
document.addEventListener('click',function(e){
alert("document")
})
//html绑定事件
var html = document.querySelector('html')
html.addEventListener('click',function(e){
alert("html")
})
</script>
</body>
</html>
|
4.阻止冒泡,我们在son的事件处理程序中添加e.stopPropagation();就不会触发其他元素的事件了
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
overflow: hidden;
height: 400px;
width: 400px;
margin: 100px auto;
background-color: skyblue;
}
.son {
margin: 125px auto;
height: 150px;
width: 150px;
background-color: red;
}
</style>
</head>
<body>
<div class="parent">
<div class="son"></div>
</div>
<script>
// son绑定事件
var son = document.querySelector('.son')
son.addEventListener('click',function(e){
alert("son")
e.stopPropagation();
})
//parent绑定事件
var parent = document.querySelector('.parent')
parent.addEventListener('click',function(e){
alert("parent")
})
//document绑定事件
document.addEventListener('click',function(e){
alert("document")
})
//html绑定事件
var html = document.querySelector('html')
html.addEventListener('click',function(e){
alert("html")
})
</script>
</body>
</html>
|
5.事件委托
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li {
width: 50px;
}
</style>
</head>
<body>
<ul>
<li>我是11</li>
<li>我是12</li>
<li>我是13</li>
<li>我是14</li>
<li>我是15</li>
</ul>
<script>
// 事件委托的核心原理: 给父节点添加侦听器，利用事件冒泡影响每一个子节点
var ul = document.querySelector("ul")
ul.addEventListener('click',function(e){
console.dir(e)
alert(e.target.innerText);
// 排他思想，将其他标签颜色设置为空
for (var i=0;i<ul.childElementCount;i++){
ul.children[i].style.backgroundColor = ""
}
e.target.style.backgroundColor = "skyblue"
})
</script>
</body>
</html>
|
SoulChild
微信号
微信打赏