事件捕获是否通过触发节点的兄弟姐妹？答案

【问题标题】：Does event capturing go through siblings of the firing node?事件捕获是否通过触发节点的兄弟姐妹？
【发布时间】：2020-10-09 08:36:10
【问题描述】：

假设我们有：

<div id="parent">d1
  <div id="child-1">child-1</div>
  <div id="child-2">child-2</div>
</div>

我在child-2 上有一个事件监听器。

据我了解，事件捕获将沿着节点树向下直到到达事件触发的节点。

事件捕获是否也通过兄弟孩子，检查他们是否是触发事件的目标？

【问题讨论】：

看看capturing and bubbling
@ATD 我看过了，没有找到解决捕获如何对待兄弟姐妹的问题。也许我错过了，或者我想寻找其他东西？
文档显示捕获和冒泡在事件触发元素和顶部节点之间上下移动。它还解释说，如果事件触发器元素本身包含节点，则捕获也会向下到那些节点。它不会上升一级，然后下降到所有子节点。因此，在您的示例中，如果“父” div 是触发器，它将下降到“child-1”和“child-2”，但不会出现“child-1”、“parent”、“孩子 2 英寸。
看它像：....grandparent.parent.**trigger**.children.grandchildren....会有一个对象的direct路径到另一个通过触发元素。该元素将自己标识为触发元素，因此无需任何代码来检查。
@ATD 所以触发事件的元素保存了捕获路径的信息？如果是这样，那么它是有道理的。

标签： javascript event-handling event-capturing

【解决方案1】：

正如您在此 sn-p 中看到的，如果单击 child1 的第一个父项，则 child1 会触发。如果您检查控制台，您会看到 e.target 是相同的，因此该事件将针对父和子上的相同元素。单击 child1 时：事件从父级传递到 child1 并且 child2 事件永远不会触发

const parent= document.getElementById('parent');

const child1 = document.getElementById('child1');
const child2 = document.getElementById('child2');

parent.addEventListener(
  'click',
  e => {
  console.log("parent")
  console.log(e.target)
  },
  true
);

child1.addEventListener(
  'click',
  e => {
    console.log("child1")
    console.log(e.target);
  },
  true
);

child2.addEventListener(
  'click',
  e => {
    console.log("child2")
    console.log(e.target);
  },
  true
);

.parent{
width: 500px;
height: 500px;
background-color: orange;

}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Expense Tracker</title>
  </head>
  <body>
    <h1>Event Capturing</h1>
    <div class="parent" id="parent">
      <h2 id="child1">Child1</h2>
      <h3 id="child2">Child2</h3>
    
    </div>
  </body>
</html>

【讨论】：