Javascript 多个子元素的单事件侦听器

考虑以下HTML代码：

---

每次单击上面的一个框时，我都要更改

的颜色。我不是在介绍CSS。是否可以在3个框上使用3个事件侦听器来处理单击事件，而只使用一个？我听说过碎片。有什么想法吗？

如果将事件侦听器附加到

部分，则可以找到单击的元素

var section = document.getElementsByTagName('section')[0];
section.addEventListener('click', function(e) {
    console.log(e.toElement);
});

您可以在包含三个
元素的
上使用一个侦听器，然后检查
event.target
以查看是否单击了其中一个元素。因此，只有单击三个框中的一个，而不是父元素
时，代码才会运行

这里有一个例子。为了清晰起见，我添加了一个ID、类和一些CSS


var section=document.getElementById（“容器”）；
container.addEventListener（“单击”，函数（e）{
if（e.target.className==“box”）{
//你点击了一个盒子
container.style.backgroundColor=e.target.style.backgroundColor；
}
});
document.getElementById（“左框”）.style.backgroundColor=“红色”；
document.getElementById（“中间框”）.style.backgroundColor=“绿色”；
document.getElementById（“右框”）.style.backgroundColor=“蓝色”
#容器{
背景颜色：黄色；
显示：内联块；
填充：10px；
}
#容器>分区{
宽度：50px；
高度：50px；
保证金：5px；
边框：1px纯黄色；
显示：内联块；
}

将事件侦听器绑定到
部分
以侦听单击/事件。然后如何才能判断三个框中的哪一个被单击？只需检查传递给处理程序的事件对象。在这种情况下是否需要id？@ILIAS:id
很少（如果有必要的话）是必需的；对于JavaScript来说，它们只是为特定目的选择或指定特定节点的简单方法。通常最好使用
id
，否则您可能必须首先识别DOM以确定要使用和选择的元素，然后JavaScript取决于DOM及其结构。因此，使用
id
更容易，但绝对没有必要。