addEventListener sur NodeList

Ne NodeList soutien addEventListener. Si non quelle est la meilleure façon d'ajouter de la EventListener à tous les nœuds de la NodeList. Actuellement, je suis en utilisant l'extrait de code comme ci-dessous montrent, est-il une meilleure façon de le faire.

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

source d'informationauteur Dinesh P.R.

  1. 24

    Il n'y a aucun moyen de le faire sans une boucle sur chaque élément. Vous pouvez, bien sûr, écrire une fonction pour le faire pour vous.

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

    ou plus spécialisés version:

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

    Et, si vous ne posez pas de questions sur jQuery, c'est le genre de trucs que jQuery est particulièrement bon à:

    $('.coins').on('dragstart', handleDragStart);
  2. 12

    En fait, il y est une manière de le faire sans une boucle: 

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

    Et de cette façon est utilisé dans un de mes one-liner bibliothèques d'assistance - nanoQuery.

  3. 7

    Du mieux que je pouvais trouver était:

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

    Remarque que cela utilise ES6, donc assurez-vous de transpile!

  4. 3

    dans l'es6, vous pouvez faire un tableau à partir d'nodelist, à l'aide du Tableau.à partir, par exemple,

    ar_coins = document.getElementsByClassName('coins');
Array
 .from(ar_coins)
 .forEach(addEvent)

function addEvent(element) {
  element.addEventListener('click', callback)
}

    ou il suffit d'utiliser la flèche fonctions

    Array
  .from(ar_coins)
  .forEach(element => element.addEventListener('click', callback))
  5. 3

    L'exemple le plus simple est d'ajouter cette fonctionnalité à NodeList

    NodeList.prototype.addEventListener = function (event_name, callback, useCapture)
{
    for (var i = 0; i < this.length; i++)
    {
      this[i].addEventListener(event_name, callback, useCapture);
    }
};

    Maintenant vous pouvez le faire:

    document.querySelectorAll(".my-button").addEventListener("click", function ()
{
    alert("Hi");
});

    De la même manière, vous pouvez faire un forEach boucle

    NodeList.prototype.forEach = function (callback)
{
    for (var i = 0; i < this.length; i++)
    {
      callback(this[i], i);
    }
};

    À l'aide de:

    document.querySelectorAll(".buttons").forEach(function (element, id)
{
    input.addEventListener("change", function ()
    {
        alert("button: " + id);
    });
});

    MODIFIER : notez que NodeList.le prototype.forEach a existé depuis novembre 2016 dans FF. No IE soutien

  6. 1

    Je suppose, une autre option consisterait à définir addEventListener sur NodeList à l'aide de Object.defineProperty. De cette façon, vous pouvez traiter la NodeList comme vous le feriez d'un seul Nœud.

    Comme un exemple, j'ai créé un jsfiddle ici: http://jsfiddle.net/2LQbe/

    Le point clé est: est-ce

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