如何在中间捕捉事件

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，并获取父元素以检索data属性或
• 从根目录和数据属性中检索.group元素。

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

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

Answer 1

A）到根只有一个事件（#container）

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

B）我可以先获取“ .group”的节点列表，进行循环并附加元素。

当您做出选择器时，它将为您提供一个类似于dom节点对象的数组。 您必须遍历它们并绑定事件。

因此，总体思路是，随着事件在DOM中趋于冒泡，您可以将事件绑定在#container的子div上。 现在，每当您单击.group的子div时，它将始终找到绑定了事件的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> 

Answer 2

A）到根只有一个事件（#container）

如果结构不太复杂，则可以将事件绑定到根目录并检查event.target的类以运行操作。

检查event.target是a-casual-class-1还是a-casual-class-2，并获取父元素以检索data属性或从根目录和data-attr中检索.group元素。

除了检查a-casual-class-1 ，您还可以检查父母的班级，然后采取措施。

例如：

 var target = document.getElementById('container'); target.addEventListener('click', doAction); function doAction(e) { if (e.target.className === 'group') { console.log(e.target.dataset.attr); } if (e.target.parentElement.className === 'group') { console.log(e.target.parentElement.dataset.attr); } } 

 #container { margin: 12p; padding: 12px; border: 4px solid #b33; } .group { margin: 12px; padding: 12px; border: 4px solid #33b; } .group > div { background-color: #ddd; } 

 <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> 

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

如果标记和结构变得复杂，则最好使用querySelectorAll遍历.groups ，然后将事件绑定到其中的每个事件。 这就是其他答案中显示的内容。

---

底线：仅看代码是否开始变得过于复杂，具体取决于标记结构的复杂性。 另外，您还需要考虑是否有其他事件处理程序绑定到#container嵌套的同级和/或子级。 在这种情况下，您可能会发现自己迷住了capture和/或stopPropagation 。