javascript - 在 NodeList 上添加事件监听器

Question

这个问题已经有答案了:

Adding click event listener to elements with the same class (5 个回答)

已关闭 去年。

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

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