时间戳

首页 > 解决方案 > 使用事件侦听器时如何访问父容器上的属性？

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

问题描述

我已将事件侦听器附加到容器元素。我已经向容器元素添加了一个数据属性，并在我单击容器时消除了数据属性，所以效果很好。我可以看到，当我单击容器内的任何子项时，它也会触发事件侦听器，但是我无法获取数据属性。单击孩子时如何获取容器的数据属性的任何想法？

在此处查看实际操作：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);
  });
});

标签： javascriptaddeventlistener

解决方案

由于事件冒泡，您将获得来自容器的所有点击以及子元素的任何事件。

targetevent 属性是指触发事件的元素，而不是容器本身（期望直接单击容器）。

您应该使用currentTargetevent 属性，该属性指的是附加了侦听器的元素。

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

推荐阅读