javascript - 使用事件监听器时如何访问父容器上的属性？

Question

我已将事件监听器附加到容器元素。我已将数据属性添加到容器元素，并在单击容器时调出数据属性，这样效果很好。我可以看到，当我单击容器内的任何子项时，它也会触发事件监听器，但随后我无法获取数据属性。有什么想法可以在单击子项时获取容器的数据属性吗？

在此处查看实际效果:https://js-addeventlistener-demo.stackblitz.io

HTML:

<div class="group">
  <div class="container" data-letter="A">
    <h2>A</h2>
    <span>Subtitle</span>
  </div>

  <div class="container" data-letter="B">
    <h2>B</h2>
    <span>Subtitle</span>
  </div>

  <div class="container" data-letter="C">
    <h2>C</h2>
    <span>Subtitle</span>
  </div>
</div>

JavaScript:

const containers = document.querySelectorAll('div.container');

containers.forEach(container => {
  container.addEventListener('click', e => {
    console.dir(e.target);
    console.log('The dataset letter for the container element is', e.target.dataset.letter);
  });
});

Answer 1

由于事件 bubbling您将从容器中获得所有点击以及子元素的任何事件。

target 事件属性是指触发事件的元素，而不是容器本身(期望直接点击容器)。

您应该使用 currentTarget 事件属性，它引用监听器所附加的元素。

containers.forEach(container => {
  container.addEventListener('click', e => { 
    console.log(
      'The dataset letter for the container element is', 
      e.currentTarget.dataset.letter
    );
  });
});