Question

<!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

请详细解释。

Answer 1

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。

Answer 2

导入最多的是目标阶段触发捕获和冒泡操作。

other material with very understandable language states here

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

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

2 个答案: