36

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

8 回答 8

46

如果不遍历每个元素，就没有办法做到这一点。当然，您可以编写一个函数来为您执行此操作。

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);
于 2012-09-11T03:44:53.303 回答
22

我能想到的最好的是：

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

请注意，这使用了 ES6 特性，因此请务必先转译它！

于 2015-11-03T05:55:23.207 回答
12

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

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

这种方式用于我的一个单行助手库 - nanoQuery。

于 2013-01-31T12:53:40.667 回答
7

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

于 2016-04-12T09:20:17.840 回答
6

在 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))
于 2016-12-07T13:35:01.560 回答
2

我想另一种选择是定义addEventListener使用NodeList. Object.defineProperty这样您就可以像对待单个节点一样对待 NodeList。

例如，我在这里创建了一个 jsfiddle：http: //jsfiddle.net/2LQbe/

关键点是这样的：

Object.defineProperty(NodeList.prototype, "addEventListener", {
    value: function (event, callback, useCapture) {
        useCapture = ( !! useCapture) | false;
        for (var i = 0; i < this.length; ++i) {
            if (this[i] instanceof Node) {
                this[i].addEventListener(event, callback, useCapture);
            }
        }
        return this;
    }
});
于 2014-02-01T13:03:00.927 回答
2

另一种解决方案是使用事件委托。您只需向“.coins”的 closets 父级添加一个事件监听器，并在回调中使用 event.target 来检查点击是否真的在具有“​​coins”类的元素上。

于 2018-12-31T19:08:55.047 回答
0

你也可以使用原型

NodeList.prototype.addEventListener = function (type, callback) {
    this.forEach(function (node) {
        node.addEventListener(type, callback);
    });
};
于 2018-12-14T10:00:49.637 回答