Javascript 如何捕捉中间事件

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

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

***
AAA
***
AAA

A） 只需将单个事件发送到根（#容器）

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

B） 我可以首先获取“.group”的节点列表，创建一个循环并将事件侦听器附加到每个元素

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

A） 只需将单个事件发送到根（#容器）

您可以使用

document.querySelectorAll（）

以所有内部div为目标

B） 我可以首先得到“.group”的节点列表，创建一个循环并附加元素

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

因此，总体思路是，由于事件往往会在DOM中冒泡，因此可以在

#container

的子div上绑定事件。现在，无论何时单击

.group

的子div，它都会找到绑定了事件的div，并执行回调

var-divs=document.querySelectorAll（'#container>div'）；
//forEach（函数（div）{//它在chrome57上工作
[].forEach.call（divs，function（div）{//如果用户使用的是旧版本的浏览器，则会更改
div.addEventListener（'click'，函数（e）{
var data=this.dataset.attr；
控制台日志（数据）；
});
})；

***
AAA
***
AAA

A） 只需将单个事件发送到根（#容器）

您可以使用

document.querySelectorAll（）

以所有内部div为目标

B） 我可以首先得到“.group”的节点列表，创建一个循环并附加元素

当你做一个选择器时，它会给你一个类似数组的dom节点对象，你必须循环遍历它们并绑定事件

因此，总体思路是，由于事件往往会在DOM中冒泡，您可以在

#container

的子div上绑定事件。现在，每当您单击

.group

的子div时，它总是会找到绑定了事件的div，并只执行回调

var-divs=document.querySelectorAll（'#container>div'）；
//forEach（函数（div）{//它在chrome57上工作
[].forEach.call（divs，function（div）{//如果用户使用的是旧版本的浏览器，则会更改
div.addEventListener（'click'，函数（e）{
var data=this.dataset.attr；
控制台日志（数据）；
});
})；

***
AAA
***
AAA

A） 只需将单个事件发送到根（#容器）

如果结构不太复杂，则可以将事件绑定到根，并检查

event.target

类以运行操作

检查event.target是a-casual-class-1还是a-casual-class-2，然后获取 用于检索数据属性或.group的父元素 元素和数据属性

不必检查

a-casual-class-1

，您可以检查父级的类，然后执行操作

例如：

var target=document.getElementById（'container'）；
target.addEventListener（'click'，doAction）；
函数doAction（e）{
如果（e.target.className=='group'）{
log（e.target.dataset.attr）；
}
如果（e.target.parentElement.className==='group'）{
log（e.target.parentElement.dataset.attr）；
}	
}

#容器{
边距：12p；填充：12px；
边框：4px实心#b33；
}
.组{
边距：12px；填充：12px；
边框：4px实心#33b；
}
.group>div{背景色：#ddd；}

***
AAA
***
AAA

A） 只需将单个事件发送到根（#容器）

如果结构不太复杂，则可以将事件绑定到根，并检查

event.target

类以运行操作

检查event.target是a-casual-class-1还是a-casual-class-2，然后获取 用于检索数据属性或.group的父元素 元素和数据属性

不必检查

a-casual-class-1

，您可以检查父级的类，然后执行操作

例如：

var target=document.getElementById（'container'）；
target.addEventListener（'click'，doAction）；
函数doAction（e）{
如果（e.target.className=='group'）{
log（e.target.dataset.attr）；
}
如果（e.target.parentElement.className==='group'）{
log（e.target.parentElement.dataset.attr）；
}	
}

#容器{
边距：12p；填充：12px；
边框：4px实心#b33；
}
.组{
边距：12px；填充：12px；
边框：4px实心#33b；
}
.group>div{背景色：#ddd；}

***
AAA
***
AAA

你能使用jQuery吗？我的问题确实与普通JavaScript有关。你是否尝试自己解决问题？你能使用jQuery吗？我的问题确实与普通JavaScript有关。你是否尝试自己解决问题？回答很好。查询选择器有一个小问题。

querySelectorAll

方法返回NodeList对象。您不能使用

forEach

直接访问它。一个简单的解决方案是使用

Array.prototype.forEach.call（divs，function（div）{…}）

谢谢。有时我尝试使用经典for循环，但我不得不将事件侦听器打包在一个闭包中，forEach似乎可以工作，不是吗？如果元素列表很小，可能会很好，因为性能原因，对吧？是的，在chrome 57.0.2987.133（正式构建）（32位）上，它可以正常工作…；）@AlexSlipknot@Jai，好的，然后运行它