NodeList 是否支持 addEventListener。如果不是，将 EventListener 添加到 NodeList 的所有节点的最佳方法是什么。目前我正在使用如下所示的代码片段，有没有更好的方法来做到这一点。
var ar_coins = document.getElementsByClassName('coins');
for(var xx=0;xx < ar_coins.length;xx++)
{
ar_coins.item(xx).addEventListener('dragstart',handleDragStart,false);
}
如果不循环遍历每个元素，就没有办法做到这一点。当然，您可以编写一个函数来为您执行此操作。
function addEventListenerList(list, event, fn) {
for (var i = 0, len = list.length; i < len; i++) {
list[i].addEventListener(event, fn, false);
}
}
var ar_coins = document.getElementsByClassName('coins');
addEventListenerList(ar_coins, 'dragstart', handleDragStart);
或更专业的版本：
function addEventListenerByClass(className, event, fn) {
var list = document.getElementsByClassName(className);
for (var i = 0, len = list.length; i < len; i++) {
list[i].addEventListener(event, fn, false);
}
}
addEventListenerByClass('coins', 'dragstart', handleDragStart);
而且，虽然您没有询问 jQuery，但这是 jQuery 特别擅长的东西：
$('.coins').on('dragstart', handleDragStart);
我能想到的最好的办法是：
const $coins = document.querySelectorAll('.coins')
$coins.forEach($coin => $coin.addEventListener('dragstart', handleDragStart));
请注意，这使用了 ES6 特性，因此请确保先将其转译！
实际上有一种方法可以在没有循环的情况下做到这一点：
[].forEach.call(nodeList,function(e){e.addEventListener('click',callback,false)})
这种方式用于我的单行助手库之一 - nanoQuery。
最简单的例子是将此功能添加到 NodeList
NodeList.prototype.addEventListener = function (event_name, callback, useCapture)
{
for (var i = 0; i < this.length; i++)
{
this[i].addEventListener(event_name, callback, useCapture);
}
};
现在你可以这样做：
document.querySelectorAll(".my-button").addEventListener("click", function ()
{
alert("Hi");
});
同样的方法，你可以做一个forEach循环
NodeList.prototype.forEach = function (callback)
{
for (var i = 0; i < this.length; i++)
{
callback(this[i], i);
}
};
使用：
document.querySelectorAll(".buttons").forEach(function (element, id)
{
input.addEventListener("change", function ()
{
alert("button: " + id);
});
});
编辑：请注意 NodeList.prototype.forEach 自 2016 年 11 月以来在 FF 中一直存在。虽然没有 IE 支持
在 es6 中，您可以使用 Array.from 从节点列表中创建一个数组，例如
ar_coins = document.getElementsByClassName('coins');
Array
.from(ar_coins)
.forEach(addEvent)
function addEvent(element) {
element.addEventListener('click', callback)
}
或者只使用箭头函数
Array
.from(ar_coins)
.forEach(element => element.addEventListener('click', callback))