捕获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、查看开发者面板事件绑定的顺序，不管我是先绑定哪个。最后都是冒泡排第一位。
这里面有什么讲究么

阅读 3.4k

<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

捕获or冒泡？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

为什么会出现CORS error？

请问一下，如何理解reduce函数呢？

如何实现从一个div中拖拽dom到另一个div容器？