捕获or冒泡？

遇上一个问题，自己无法理解，求大神科普下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .test {
      height:300px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="test1" class="test">
    点我吧
  </div>
  <div id="test2" class="test">
    点我吧
  </div>
  <script type="text/javascript" src="./index.js"></script>
</body>
</html>

var _tap = 'click';

//先绑定冒泡再绑定捕获
var dom1 = document.getElementById('test1');
dom1.addEventListener(_tap, function (e) {
  console.log('d1冒泡');
},false);
dom1.addEventListener(_tap, function (e) {
  console.log('d1捕获');
},true);

//先绑定捕获再绑定冒泡
var dom2 = document.getElementById('test2');
dom2.addEventListener(_tap, function (e) {
  console.log('d2捕获');
},true);
dom2.addEventListener(_tap, function (e) {
  console.log('d2冒泡');
},false);

依次执行结果

各节点绑定的事件顺序

疑问：
1、js事件机制不是先捕获再冒泡嘛。
2、查看开发者面板事件绑定的顺序，不管我是先绑定哪个。最后都是冒泡排第一位。
这里面有什么讲究么

因为你是对同一个元素绑定一个事件的两个处理函数，当然是按照先后顺序执行，这里并不存在捕获和冒泡的问题

1.w3c的事件流是先捕获再冒泡,
2.addEventListener第三个参数如果是useCapture,如果值为true 就阻止冒泡但是会触发捕获, 如果是false 就阻止捕获,但是不阻止冒泡.
3.想要测试事件流需要父元素和子元素结合比如

<div class='outer'>
    <div class='inner'></div> 
</div>
点击inner
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');

//案例一
outer.addEventListener('click', function (e) {
  console.log('outer');
},false);//捕获阶段不触发 但是冒泡的时候会触发
inner.addEventListener('click', function (e) {
  console.log('inner');//这个是目标事件 不管怎么设置 都会触发
},true);
输出  inner outer

//案例二
outer.addEventListener('click', function (e) {
  console.log('outer');
},true);//捕获阶段就触发
inner.addEventListener('click', function (e) {
  console.log('inner');
},true);
输出 outer inner

总结事件的冒泡与否都不会阻止事件整个流程,但是会决定他本身绑定的事件在哪个阶段触发而已

【热门文章】