Динамическое добавление нескольких прослушивателей событий в JavaScript

Question

Если у меня есть программа, которая динамически добавляет и отнимает элементы html, и каждый из этих элементов должен иметь прослушиватель событий, есть способ добавить прослушиватель событий к переменной, которая проще чем делать это один за другим? Я хотел использовать массив и иметь каждый индекс массива, чтобы к нему подключался прослушиватель событий, но это, похоже, не работает.

var1 = document.getElementById('name'); 
var1.addEventListener("mousedown", doMouseDown, false); 

Это прекрасно работает, но у меня около 100 элементов, поэтому я надеялся, что есть более простой способ, чем создание 100 отдельных переменных. У меня есть более простой способ сделать это, я бы обожал любые предложения. :)

Answer 1

Повторение кода обычно можно избежать с помощью петель. В этом случае создать список (массив) все идентификаторы, и цикл через него:

var names = ['name1', 'name2', 'etc']; 
for (var i=0; i<names.length; i++) { 
    document.getElementById(name[i]).addEventListener("mousedown", 
                  doMouseDown, false); 
} 

Если все элементы не имеют потомков, вы можете также связать один события общего родителя, и проверка event.target свойства:

var names = '|name1|name2|'; 
document.addEventListener('mousedown', function(event) { 
    // Use String.indexOf, because old IE browsers do not support Array.indexOf 
    if (names.indexOf('|' + event.target.id + '|') !== -1) doMouseDown(event); 
}, false); 

Answer 2

Если все эти элементы являются детьми контейнерного элемента, вы можете добавить один слушатель события к родительскому элементу, чтобы захватить все эти события.

См. http://www.quirksmode.org/js/events_order.html для получения дополнительной информации о том, как события javascript прошли и владеют деревом DOM.

Answer 3

вы можете упорядочить свои элементы, указав их одинаковое имя, а затем помещая их в массив, используя getElementsByName. После этого вы можете перебирать массив и добавлять слушателей к каждому элементу.