Fork me on GitHub

Capture和Bubble,简明解读addEventListener的第三个参数

target.addEventListener(type, listener[, useCapture]);

前两个参数很好理解,这里不多说,第三个参数是个布尔值,代表Capture和Bubble
网上解释很多,啰哩啰嗦的,这里用一段代码来解读

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="border:1px solid red" id="aa">aaaa
<div style="border:1px solid yellow" id="bb">bbbb
<div style="border:1px solid blue" id="cc">cccc
<div style="border:1px solid green" id="dd">dddd</div>
</div>
</div>
</div>

<script language="javascript">
var dom = document.getElementsByTagName("div");
for(var i =0; i<dom.length; i++){
dom[i].addEventListener("click",function(evt){
console.log(this.id);
},false);
}
</script>
</body>
</html>

addEventListener第三个参数为false,也是最常用的

在chrome下执行后点击 dddd,控制台依次打印 dd > cc > bb > aa

接着把第三个参数改为true,再点击dddd,控制台依次打印 aa > bb > cc > dd

LOOK,明了,可以这么理解Capture和Bubble的事件触发顺序

Capture: document > body > div

Bubble: div > body > document

转一张w3c的图,来源地址 http://www.w3.org/TR/DOM-Level-3-Events/#event-flow

Capture

相关文章推荐

如果觉得我的文章对您有用,可否请我喝杯速溶咖啡