Динамическое добавление нескольких слушателей событий в 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

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

Answer 3

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

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