如何在 JavaScript 中为多个元素分配事件处理程序？答案

【问题标题】：How do you assign an event handler to multiple elements in JavaScript?如何在 JavaScript 中为多个元素分配事件处理程序？
【发布时间】：2014-12-08 16:34:21
【问题描述】：

我知道如何使用 jQuery 来做到这一点，我也知道如何使用事件委托来做到这一点。但是你如何在纯 JavaScript 中做到这一点？

例如，如何将事件处理程序分配给一堆lis？

我看到var li = document.querySelectorAll('li');。返回一个类似数组的东西。你只是循环并分配处理程序吗？我觉得必须有更好的方法。如果不是，那么循环遍历类似数组的东西的最佳方法是什么（以及类似数组的东西叫什么？）？

【问题讨论】：

这是一个严肃的问题吗？是的，当你有一个集合，并且你想对集合中的每个元素应用一些行为时，你可以迭代集合并对单个成员进行操作。没有更好的办法。这正是 jQuery 所做的。
@squint 我想有一种方法可以做类似li.<add listeners to each> 的事情。我还在学习编程，但事后看来你说的很有道理。不过，我认为这对学生来说是一个完全可以理解的问题。
您可能应该使用委托而不是在循环中手动添加大量事件。您只需将点击（或其他）添加到 UL 而不是 LI，然后在处理程序中检查 e.target 而不是 this。
四个字的答案：“一次一个”。

标签： javascript javascript-events event-handling

【解决方案1】：

是的，您应该遍历集合并单独分配处理程序。 jQuery 也在幕后做这件事。

querySelectorAll 返回一个NodeList，它是一个类似数组的对象。

对于遍历列表，您可以使用for 循环：

var list = document.querySelectorAll('li'),
    l = list.length,
    li;

for (var i = 0; i < l; i++) {
   li = list.item(i);
   // ...
}

或者使用forEach方法：

[].forEach.call(document.querySelectorAll('li'), function(li) {
    // ...
});

【讨论】：

你如何循环遍历它？ forEach 不工作。
@AdamZerner：带有for 循环。 “类数组”表示对象具有length 和数值属性。
好的，谢谢。我不确定键是什么，所以我不敢做for 循环，但键似乎是像数组一样的数字索引。