NodeList上的addEventListener

Question

NodeList是否支持addEventListener。如果不是，那么向NodeList的所有节点添加EventListener的最佳方式是什么。目前我正在使用如下所示的代码片段，有没有更好的方法来做到这一点。

var ar_coins = document.getElementsByClassName('coins');
for(var xx=0;xx < ar_coins.length;xx++)
{
        ar_coins.item(xx).addEventListener('dragstart',handleDragStart,false);
}

Answer 1

如果不遍历每个元素，就不可能做到这一点。当然，您可以编写一个函数来为您完成此操作。

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

Answer 2

我能想到的最好的结果是：

const $coins = document.querySelectorAll('.coins')
$coins.forEach($coin => $coin.addEventListener('dragstart', handleDragStart));

请注意，这使用了ES6特性，所以请确保首先转换它！

Answer 3

实际上，有一种方法可以在没有循环的情况下做到这一点：

[].forEach.call(nodeList,function(e){e.addEventListener('click',callback,false)})

在我的一个单行助手库nanoQuery中就使用了这种方法。