<body>
<div id="s1">s1
<div id="s2">s2</div>
</div>
</body>
<script>
s1.addEventListener("click",function(e){
console.log("s1 冒泡事件");
},false);
s2.addEventListener("click",function(e){
console.log("s2 冒泡事件");
},false);
s1.addEventListener("click",function(e){
console.log("s1 捕获事件");
},true);
s2.addEventListener("click",function(e){
console.log("s2 捕获事件");
},true);
</script>
addEventListener 第三个参数：
true: 捕获阶段触发事件
false: 冒泡阶段触发事件
默认值是 false, 也就是默认是冒泡阶段触发事件的。当然可以手动添加捕获事件，这样冒泡和捕获就同时存在了。
1005354-20161222125521823-1914047378.png
由上图看出，先捕获后冒泡
首先理解事件的起始和终止发生时间：
当我们点击 div, 时间捕获从window 一直传递到当前 div 就终止，不会往下走；然后进入冒泡阶段，向上层传递，再一直到 window 终止。
我们知道，对于不同dom 节点的事件传播，是先捕获后冒泡，那么对于 dom 目标节点，如果同时存在冒泡和捕获，又是什么情况呢？还是遵循上述规则吗？
不妨对文章开头的例子进行实验：
发现 s2 的冒泡发生在 s2 捕获之前
这里注意：
对于事件的目标节点，如果同时存在冒泡和捕获，那么事件的执行顺序和代码中事件绑定的顺序相同
上述示例的答案：
点击 s1:
s1 冒泡事件
s1 捕获事件
点击 s2:
s1 捕获事件
s2 冒泡事件
s2 捕获事件
s1 冒泡事件
网友评论