Bind Ereignis auf mehrere Elemente ohne Looping (Vanille JS)

Question

Ich versuche, das Äquivalent zu erreichen:

$('div').on('click', function() { 
    // Do something 
}); 

Aber ohne jQuery. Mein erster Gedanke war, eine for Schleife zu verwenden, um über alle Elemente in der Menge zu iterieren, aber meine Vermutung ist, dass es einen besseren Weg gibt, dies zu erreichen, ohne eine Schleife zu verwenden (irgendeine native Methode?).

var elems = document.getElementsByTagName('div'); 

function someEvent() { // Generic function to test against 
    alert('event fired'); 
} 

for (var i=0, j = elems.length; i < j; i += 1) { 
    elems[i].addEventListener("click", someEvent); 
} 

Gibt es einen eleganteren Weg, dies ohne die Einbeziehung einer Bibliothek zu tun?

Answer 1

Was Sie wollen, ist event delegation. Es funktioniert, indem ein einzelnes Ereignis an einen übergeordneten Knoten mehrerer Knoten gebunden und der Zielknoten des Ereignisses analysiert wird. Sie können beispielsweise onmouseup an den Knoten body binden, und wenn das Ereignis ausgelöst wird, wenn die Maus auf einem Knoten div freigegeben wird, enthält das Ereignisobjekt body den Wert div in der Eigenschaft target. Sie können das Ziel analysieren, um sicherzustellen, dass es bestimmte Kriterien erfüllt.

Ein besserer Weg, dies zu erklären, ist nur eine working example zur Verfügung zu stellen.

document.body.onmouseup = function (event) { 
    var target = event.target || event.toElement; 

    if (target.nodeName.toLowerCase() == "div") { 
     alert(target.childNodes[0].nodeValue); 
    }; 
}; 

Der wichtigste Punkt von Interesse mit diesem Beispiel ist die target variabel, und die Bedingung, um sicherzustellen, dass unsere target ein div ist. Die Bedingung kann sogar eine className oder etwas sein, das Ihr Herz begehrt.