Sie addEventListener () auf die NodeList

Tut NodeList Unterstützung addEventListener. Wenn nicht, was ist der beste Weg, um add EventListener auf alle Knoten der Knotenliste. Momentan benutze ich das code-snippet, wie unten dargestellt, gibt es einen besseren Weg, dies zu tun.

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

InformationsquelleAutor der Frage Dinesh P.R. | 2012-09-11

  1. 26

    Gibt es keine Möglichkeit, es zu tun, ohne die Schleife durch jedes element. Du könntest natürlich eine Funktion schreiben, die es für Sie tun.

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

    oder eine speziellere 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);

    Werden, und obwohl Sie nicht Fragen über jQuery, das ist die Art von Zeug, dass jQuery ist besonders gut an:

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

    InformationsquelleAutor der Antwort jfriend00

  2. 13

    Gibt es eigentlich ist ein Weg, dies zu tun ohne einer Schleife: 

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

    Und auf diese Weise verwendet wird, in einem meiner one-liner helper-Bibliotheken - nanoQuery.

    InformationsquelleAutor der Antwort Multiversum

  3. 9

    Die besten, die ich tun konnte, war dieses:

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

    Beachten Sie, dass diese verwendet ES6-features, also bitte stellen Sie sicher, dass transpile!

    InformationsquelleAutor der Antwort Kris Selbekk

  4. 4

    in es6, die Sie tun können, ein array von nodelist, mit Array.aus, z.B.

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

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

    oder einfach nur mit den Pfeiltasten Funktionen

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

    InformationsquelleAutor der Antwort Darlan Mendonça

  5. 3

    Das einfachste Beispiel ist das hinzufügen dieser Funktionalität zu NodeList

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

    Können Sie jetzt tun:

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

    In der gleichen Weise, die Sie tun können, eine forEach Schleife

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

    Mit:

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

    BEARBEITEN : beachten Sie, dass die NodeList.der Prototyp.forEach zwar schon seit november 2016 FF. Keine IE-Unterstützung obwohl

    InformationsquelleAutor der Antwort Profesor08

  6. 1

    Ich nehme an, eine weitere option wäre zu definieren addEventListener auf NodeList mit Object.defineProperty. So können Sie die Behandlung der NodeList als würden Sie einen einzelnen Knoten.

    Als Beispiel habe ich ein jsfiddle hier: http://jsfiddle.net/2LQbe/

    Der entscheidende Punkt ist dieser:

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

    InformationsquelleAutor der Antwort Duncan

Schreibe einen Kommentar