0

假设我们有：

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

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

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

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

4

1 回答 1

0

正如您在此片段中看到的，如果单击 child1 的第一个父项，则 child1 触发。如果您检查控制台，您会发现两者e.target是相同的，因此该事件将针对父级和子级上的相同元素。单击 child1 时：事件从 parent 到 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>

于 2020-10-09T09:37:03.007 回答