js中两个相同监听器的捕获和冒泡的执行顺序答案

【问题标题】：The executing order of capture and bubble for two same listeners in jsjs中两个相同监听器的捕获和冒泡的执行顺序
【发布时间】：2018-11-13 21:46:26
【问题描述】：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>capture and bubble</title>
  <style type="text/css">
  #child{
    background: red;
    width:50px;
    height:50px;
  }
  #father{
    width:100px;
    height:100px;
    background:green;
  }
  </style>
</head>
<body>
    <div id='father'>
      <div id='child'></div>
    </div>
</body>
<script type="text/javascript">
  var parent = document.getElementById("father");
  var child = document.getElementById('child');
  var html = document.getElementsByTagName("html")[0];
  var body = document.body;
  parent.addEventListener("click",function() {
    console.log("I am capturing parent");
  },true);
   parent.addEventListener("click",function() {
    console.log("I am parent");
  },false);
   child.addEventListener("click",function() {
    console.log("I am capturing child");
  },true);
  child.addEventListener("click",function() {
    console.log("I am child");
  },false);
  body.addEventListener("click",function() {
    console.log("I am capturing body");
  },true);  
  body.addEventListener("click",function() {
    console.log("I am body");
  },false);
  html.addEventListener("click",function() {
    console.log("I am capturing html");
  },true);
  html.addEventListener("click",function() {
    console.log("I am html");
  },false);
  parent.addEventListener("click",function() {
    console.log("I am capturing parent");
  },true);
   parent.addEventListener("click",function() {
    console.log("I am parent");
  },false);
</script>
</html>

对于上面包含一个显示捕获和冒泡执行顺序的js的html，我为父级（div父亲）绑定了两次捕获和气泡的两个监听器，为父级（div父亲）绑定了一对捕获和气泡) 是从 js 脚本部分的第 5 行到第 10 行；父级（div 父级）的另一对捕获和气泡位于 js 脚本部分的末尾。

点击绿色的div（父div），在控制台中获取结果。

test.html:50 I am capturing html
test.html:44 I am capturing body
test.html:32 I am capturing parent
test.html:35 I am parent
test.html:56 I am capturing parent
test.html:59 I am parent
test.html:47 I am body
test.html:53 I am html

为什么结果不是如下？

test.html:50 I am capturing html
test.html:44 I am capturing body
test.html:32 I am capturing parent
test.html:56 I am capturing parent
test.html:35 I am parent
test.html:59 I am parent
test.html:47 I am body
test.html:53 I am html

请详细说明。

【问题讨论】：

标签： javascript html events capture

【解决方案1】：

最重要的是目标阶段触发捕获和冒泡动作。

other material with very understandable language states here

第二阶段（“目标阶段”：事件到达元素）不单独处理：捕获和冒泡阶段的处理程序在该阶段触发。

【讨论】：

【解决方案2】：

MDN documentation for addEventListener 声明：

注意：对于附加到事件目标的事件监听器，事件处于目标阶段，而不是捕获和冒泡阶段。无论useCapture参数如何，目标阶段的事件都会按照注册的顺序触发一个元素上的所有监听器。

这就是这里发生的事情。事件侦听器附加到事件目标（在您的示例中为parent），因此事件处于目标阶段，并且侦听器按照注册的顺序触发。

请注意，如果您单击child，则不会发生这种情况，因为该事件处于捕获或冒泡阶段。预期的结果是：

I am capturing html
I am capturing body
I am capturing parent
I am capturing parent
I am capturing child
I am child
I am parent
I am parent
I am body
I am html

事件流程here有很好的解释和图解。

【讨论】：