JavaScript 事件流
DOM(文档对象模型)结构是一个树型结构,当一个HTML元素产生一个事件时,该事件会在元素节点与根结点之间的路径传播,路径所经过的结点都会收到该事件,这个传播过程可称为DOM事件流。DOM事件流最独特的性质是,文本节点也触发事件(在IE中不会),当鼠标单击“单击此文本”文本时会触发click事件,该事件的捕获阶段最先开始,从Document节点开始逐渐向下传播,直到“单击此文本”文本节点,事件进入目标阶段,在目标阶段结束之后,事件由“单击此文本”文本节点开始事件的冒泡阶段,直到Document节点为止。(摘自百度百科)
模型三阶段 捕获阶段、目标阶段、冒泡阶段
在DOM兼容浏览器中,事件流分为3个阶段:
(1)捕获阶段:事件从Document节点自上而下向目标节点传播的阶段;
(2)目标阶段:真正的目标节点正在处理事件的阶段;
(3)冒泡阶段:事件从目标节点自上而下向Document节点传播的阶段
具体过程,就是先捕获到目标然后再冒泡。
相关方法 addEventListener
语法
element.addEventListener(event, function, useCapture)
参数值
参数 描述
event 必须。字符串,指定事件名。
function 必须。指定要事件触发时执行的函数。
useCapture 可选。布尔值,指定事件是否在捕获或冒泡阶段执行。可能值:true - 事件句柄在捕获阶段执行 false- 默认。事件句柄在冒泡阶段执行
案例代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#wrap {
width: 200px;
height: 200px;
background: orange;
}
#outer {
position: relative;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background: #eeddff;
}
#inner {
position: relative;
top: 25px;
left:25px;
width: 50px;
height: 50px;
background: #44ddff;
}
</style>
</head>
<body>
<div id="wrap">
<div id="outer">
<div id="inner"></div>
</div>
</div>
</body>
<script>
var wrap = document.getElementById('wrap');
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
wrap.addEventListener('click',function(){
alert('789');
},false);
outer.addEventListener('click',function(){
alert('456');
},false);
inner.addEventListener('click',function(){
alert('123');
},false);
inner.addEventListener('click',function(){
alert('inner');
},true);
wrap.addEventListener('click',function(){
alert('wrap');
},true);
outer.addEventListener('click',function(){
alert('outer');
},true);
</script>
</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
(以上代码摘自https://segmentfault.com/a/1190000003497939)
点击查看此案例,我们会发现,首先是触发的是捕获阶段的事件,然后再触发的是冒泡阶段的事件。
重点:
我们会发现inner的dom对象上绑定的两个事件,是先弹出的123,然后又弹出的inner。这个是为什么呢?
这是因为如果当前的dom对象已经处于当前点击位置的最底部了(重点是这里最底部,如果没有到最底部,还是和外部的两个一样的)。就是说如果这个dom对象是捕获的终点也是冒泡的起点,它就不区分冒泡捕获了,只是纯粹的绑定了两个dom事件,所以,这两个事件就是看谁先绑定的靠前,谁就先实行。。。
---------------------
作者:专注前端30年
来源:CSDN
原文:https://blog.csdn.net/qq_30100043/article/details/77186811
版权声明:本文为博主原创文章,转载请附上博文链接!