Adding multiple event listeners dynamically in JavaScript

Question

If i have a program that is adding and taking away html elements dynamically and each one of these elements needs to have an event listener is there a way to add the event listener to a variable that's easier than doing it one by one? I wanted to use an array and have each index of the array to have a event listener attached to it but that doesn't seem to work.

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

This works fine but i have about 100 elements so i was hoping there is an easier way than creating 100 individual variables. I there is an easier way to do this i would love any suggestions. :)

Answer 1

Code repetition can usually be avoided by using loops. In this case, create a list (array) of all IDs, and loop through it:

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

If all of your elements have no descendants, you can also bind one event to the common parent, and check the event.target property:

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

If all these elements are children of a container element, you can add a single event listener to the parent element to capture all these events.

See http://www.quirksmode.org/js/events_order.html for more info on the way javascript events are passed up and own the DOM tree.

Answer 3

you can organize your elements by giving them the same name and then putting them into array using getElementsByName . Afterwards you could loop through the array and add listeners to each element.