AddEventListener в NodeList

Поддерживает ли 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);
}

Ответ 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);

Ответ 2

Фактически существует способ сделать это без цикла:

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

И этот способ используется в одной из моих однострочных вспомогательных библиотек - nanoQuery.

Ответ 3

Лучшее, что я мог придумать, было следующее:

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

Обратите внимание, что в этом используются функции ES6, поэтому сначала убедитесь, что они были первыми!

Ответ 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);
    });
});

РЕДАКТИРОВАТЬ: обратите внимание, что NodeList.prototype.forEach существует с ноября 2016 года в FF. Нет поддержки IE, хотя

Ответ 5

в es6, вы можете сделать массив из nodelist, используя 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))

Ответ 6

Я полагаю, что другой вариант заключается в определении addEventListener на NodeList с помощью Object.defineProperty. Таким образом, вы можете рассматривать NodeList, как и один Node.

В качестве примера я создал 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;
    }
});

Ответ 7

Вы также можете использовать прототипирование

NodeList.prototype.addEventListener = function (type, callback) {
    this.forEach(function (node) {
        node.addEventListener(type, callback);
    });
};