javascript - 如何捕获中间的事件

Question

我想附加一个点击事件监听器，并在此上下文中使用“data-attr”运行一些操作，尽可能优雅。

<div id="container">

    <div class="group" data-attr="info1">
        <div class="a-casual-class-1">***</div>
        <div class="a-casual-class-2">AAA</div>
    </div>

    <div class="group" data-attr="info2">
        <div class="a-casual-class-1">***</div>
        <div class="a-casual-class-2">AAA</div>
    </div>

</div>

A) 仅向根 (#container) 发送一个事件

• 检查 event.target 是否为 a-casual-class-1 或 a-casual-class-2 并获取父元素以检索数据属性或
• 从根和数据属性中检索 .group 元素。

B)我可以首先获取“.group”的节点列表，进行循环并将事件监听器附加到每个元素。

有没有更好的方法来处理这种情况？

Answer 1

A) Just a single event to the root (#container)

您可以使用document.querySelectorAll()来定位所有内部div。

B) I could get first the nodes list of '.group', make a loop and attach the element.

当你创建一个选择器时，它会给你一个类似于 dom 节点对象的数组。您必须循环遍历它们并绑定(bind)事件。

总体思路是，由于事件往往会在 DOM 中冒泡，因此您可以将事件绑定(bind)到#container 的子 div 上。现在，每当您单击 .group 的子 div 时，它总是会找到绑定(bind)事件的 div 并执行回调。

var divs = document.querySelectorAll('#container > div');

// divs.forEach(function(div){ // it worked at chrome 57
[].forEach.call(divs, function(div){ // changed if user is on old version of browser
  div.addEventListener('click', function(e){
    var data = this.dataset.attr;
    console.log(data);
  });
});

<div id="container">
  <div class="group" data-attr="info1">
    <div class="a-casual-class-1">***</div>
    <div class="a-casual-class-2">AAA</div>
  </div>

  <div class="group" data-attr="info2">
    <div class="a-casual-class-1">***</div>
    <div class="a-casual-class-2">AAA</div>
  </div>
</div>