事件捕获是否通过触发节点的同级进行？

问题描述

说我们有

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

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

据我了解，事件捕获将沿着节点树进行下去，直到到达事件触发的节点为止。

事件捕获是否还会通过同级孩子，检查他们是否是触发事件的目标？

解决方法

如您在本摘要中所看到的，如果单击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>

event-capturing event-handling javascript