js同一个dom元素同时绑定捕获和冒泡事件哪个先执行?

绑定在被点击元素的事件是按照代码顺序发生?是什么意思?
就是在页面加载过程中, 绑定到事件源目标元素上的函数代码的先后顺序(先后执行顺序)

如果 onclick=foo()方法在定义页面元素的时候, 就绑定了 foo()函数, 而其他 addEventListener...绑定的事件是在 div后面的 script脚本中写的, 那么foo 方法会在addEventListener 的绑定事件之前执行.
同时用 addEventListener绑定的 bubble和capture事件, 哪个写在前面就先执行哪一个.

-其他元素通过冒泡或者捕获“感知”的事件，按照W3C的标准，先发生捕获事件，后发生冒泡事件。

所有事件的顺序是：其他元素捕获阶段事件 -> 本元素代码顺序事件 -> 其他元素冒泡阶段事件。

例子:
html代码部分:

<script src="jquery.js"></script>
<script>
  function bubble(){
   console.log('最底层盒子, 被点击');
  }
/*
$(function(){
  function bubble(){
   console.log('最底层盒子, 被点击');
  }
});*/

</script>
<body>
  <div id="info">
    <div class="box-1" onclick="box1()">
      最外层
      <div class="box-2" onclick="box2()">
	第二层
	<div class="box-3" onclick="box3()">
	  第三层
	  <div class="box-4" onclick="bubble()">最底</div>
	</div>
      </div>
    </div>
  </div>
  <script>
var box0 = document.getElementsByClassName('box-1')[0];
box0.addEventListener('click', function(e){
  console.log("最外层盒子, 在向下捕获阶段被点击了");
}, true);

function box1(){
  console.log("最外层盒子在向上阶段被点击了");
}
==
function box2(){
  console.log("第二个盒子, 在向上冒泡阶段被点击了");
}
===
var second = document.getElementsByClassName('box-2')[0];
second.addEventListener('click', function(e){
  console.log("第二个盒子, 在向下捕获阶段被点击了");
}, true);

===
var third = document.getElementsByClassName('box-3')[0];
third.addEventListener('click', function(e){
  console.log("第三个盒子, 在向下捕获阶段被点击了");
}, true);

function box3(){
  console.log("第三个盒子, 在向上阶段被点击了");
}

====   这里的最底层盒子, 如果 冒泡绑定事件useCapture参数为false时 的代码写在 true代码的前面时, 就先输出冒泡;反之,
如果true代码在false代码的前面, 就先输出 捕获 , 哪个写在前面就先执行哪个

var btt = document.getElementsByClassName('box-4')[0];
btt.addEventListener('click', function(e){
  console.log("最底层盒子, 在向上冒泡阶段被点击了");
}, false);

btt.addEventListener('click', function(e){
  console.log("最底层盒子, 在向下捕获阶段被点击了");
}, true);

  </script>

</body>

==========================================================

下面是代码输出

最外层盒子, 在向下捕获阶段被点击了 test.html:35:3 第二个盒子, 在向下捕获阶段被点击了 test.html:48:3 第三个盒子, 在向下捕获阶段被点击了 test.html:54:3

最底层盒子, 被点击 test.html:4:4 // 绑定顺序最前面
最底层盒子, 在向上冒泡阶段被点击了 test.html:63:3 // 绑定在其次
最底层盒子, 在向下捕获阶段被点击了 test.html:67:3 /// 代码在最后

第三个盒子, 在向上阶段被点击了 test.html:58:3
第二个盒子, 在向上冒泡阶段被点击了 test.html:43:3
最外层盒子在向上阶段被点击了 test.html:39:3

=================================================================================================

原理: 参考: `https://www.cnblogs.com/alvinwei1024/p/4739344.html`

当一个DOM事件被触发时，它不仅仅只是单纯地在本身对象上触发一次，而是会经历三个不同的阶段：
1 捕获阶段：先由文档的根节点document往事件触发对象，从外向内捕获事件对象；
2 目标阶段：到达目标事件位置（事发地），触发事件；
3 冒泡阶段：再从目标事件位置往文档的根节点方向回溯，从内向外冒泡事件对象。

事件捕获与事件冒泡先后执行顺序就显而易见了。
由此可见：确实是先由外向内事件捕获，一直到事发元素，在由内向外冒泡到根节点上 (即: 由根节点 (window, document...)-> 叶子节点 -> 根节点 )

当事件触发在目标阶段时，会根据事件注册的先后顺序执行，在其他两个阶段注册顺序不影响事件执行顺序。
也就是说如果该处既注册了冒泡事件，也注册了捕获事件，则按照注册顺序执行。 (注册就是绑定)

在jQuery中使用return false时，相当于同时使用event.preventDefault和event.stopPropagation，它会阻止冒泡也会阻止默认行为。

但是使用原生js写时，return false只会阻止默认行为。