Bind событие для нескольких элементов без зацикливания (ванильный JS)

Question

Я пытаюсь добиться эквивалент:

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

Но без JQuery. Моя первоначальная мысль состояла в том, чтобы использовать цикл for для итерации по всем элементам в наборе, но я думаю, что есть лучший способ достичь этого, не используя цикл (какой-то собственный метод?).

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

Есть ли более элегантный способ сделать это без включения библиотеки?

Answer 1

Что вы хотите, это event delegation. Он работает, связывая одно событие с родителем нескольких узлов и анализируя целевой узел события. Например, вы можете привязать onmouseup к узлу body, а когда он запускается с момента отпускания мыши на узле div, объект события body будет содержать div в свойстве target. Вы можете проанализировать цель, чтобы убедиться, что она соответствует определенным критериям.

Лучший способ объяснить это, просто предоставить working example.

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

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

Основная достопримечательность с этим примером является target переменной, и условие, чтобы убедиться, что наша target является div. Условие может быть даже className или что угодно, чего хочет ваше сердце.