javascript - 捕获or冒泡？-PHP中文网问答

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

<!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>
  <p id="test1" class="test">
    点我吧
  </p>
  <p id="test2" class="test">
    点我吧
  </p>
  <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、查看开发者面板事件绑定的顺序，不管我是先绑定哪个。最后都是冒泡排第一位。
这里面有什么讲究么

<p class='outer'> <p class='inner'></p> </p> 点击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

全部回复(2)

伊谢尔伦2017-04-10 16:05:52 2楼

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

赞 +0

添加回复

大家讲道理2017-04-10 16:05:52 1楼

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

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