问题
<html id="myhtml">
<head>
<meta charset="utf-8" />
<title>event bubble/capture</title>
</head>
<body id="mybody">
<div id="mydiv">
click me ....
</div>
</body>
<script type="text/javascript">
document.getElementById("mydiv").addEventListener("click",function(){
console.log("div");
});
document.getElementById("mybody").addEventListener("click",function(){
console.log("body");
});
document.getElementById("myhtml").addEventListener("click",function(){
console.log("html");
});
</script>
</html>
先来看一个问题，点击div时，打印顺序是div>body>html 还是 html>body>div?
在历史上，有一部分浏览器厂商采用了第一种方案，有一部分采用了第二种方案。第一种方案是由近及远，由里往外，一直往上冒泡，称为“冒泡阶段”。第二种是由外往里，由远及近，称为“捕获阶段”，当事件到达节点时称为“目标阶段”。
后来DOM模型，将这三个事件阶段统一到一个模型里，“捕获阶段”、“目标阶段”、“冒泡阶段”，默认的，在冒泡阶段触发监听器。 所以，上述例子的输出是，div>body>html
当然也可以，在捕获阶段触发监听器，输出是html>body>div。
target.addEventListener(type, listener, useCapture);
var capture = true;
document.getElementById("mydiv").addEventListener("click",function(){
console.log("div");
},capture);
document.getElementById("mybody").addEventListener("click",function(){
console.log("body");
},capture);
document.getElementById("myhtml").addEventListener("click",function(){
console.log("html");
},capture);
参考
3.1. Event dispatch and DOM event flow
EventTarget.addEventListener()
javascript高级程序设计（第二版）
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/20288.html