NodeList上的addEventListener

Question

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

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.

Answer 4

最简单的示例是将此功能添加到 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);
    });
});

编辑：请注意，自2016年11月以来，FF中一直存在NodeList.prototype.forEach。虽然没有IE支持

Answer 5

在es6中，您可以使用Array.from从nodelist中创建一个数组，例如

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