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. :)

Rob W · Accepted Answer · 2012-03-16 17:03:21Z

5

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

answered Mar 16, 2012 at 17:03

Rob W

350k87 gold badges811 silver badges683 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rob Agar · Accepted Answer · 2012-03-16 17:08:14Z

1

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.

answered Mar 16, 2012 at 17:08

Rob Agar

12.5k5 gold badges52 silver badges64 bronze badges

2 Comments

Boris D. Teoharov Over a year ago

Mozilla doesnt support this well - ive seen it in practice so although it is elegant solution it isnt the best solution in terms of compatability.

Rob Agar Over a year ago

@dudelgrincen - it does if you use an abstraction layer like Mootools or jQuery to take care of browser differences.

Boris D. Teoharov · Accepted Answer · 2012-03-16 17:11:50Z

1

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.

answered Mar 16, 2012 at 17:11

Boris D. Teoharov

2,3965 gold badges31 silver badges50 bronze badges

Collectives™ on Stack Overflow

Adding multiple event listeners dynamically in JavaScript

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related