How do I listen on all array items?

Question

I am collecting all images elements from the document var listen = document.getElementsByTagName('img'); which results in an array. Now I have to specify listen[0], listen[1], listen[2], listen[3] etc to listen for events on a element from this array. The question is is there any way to just do something like listen[any item from this array], or a function. Just to don't have to specify every element to listen on manually.

Example

Now I have to do something like this, for every array item: listen[3].click = function() {};

[getElementsByTagName(...)](https://developer.mozilla.org/en-US/docs/DOM/element.getElementsByTagName) returns a HTMLCollection, not an array. — Kijewski, Apr 02 '13 at 22:20
@user2162852 see http://stackoverflow.com/questions/15763358/difference-between-htmlcollection-nodelists-and-arrays-of-objects — Kijewski, Apr 02 '13 at 22:25
@amnotiam if I could just loop this HTMLCollection one time and add to my object event listeners for every item of this HTMLCollection, I would don't, have to loop every time. — mechanicious, Apr 02 '13 at 22:26
You would loop once and assign the handler. If you're creating new `img` elements in the future, you'd assign the handler directly when they're created,. — , Apr 02 '13 at 22:28
Many thanks for all your help, I think I can handle it from now. Thank you! — mechanicious, Apr 02 '13 at 22:29

score 3 · Accepted Answer · edited Apr 02 '13 at 22:55

Depending on what it is exactly what you want and what the DOM looks like you may want to use an event listener higher up the DOM tree somewhere instead of create a lot of listeners:

document.addEventListener('click', function(e) {
    if (e.target.nodeName !== 'IMG') {
        return;
    }

    alert('img clicked');
});

Demo: http://jsfiddle.net/APSMT/1/

Note that I have attached the event listener to document, but if you can make it more specific you should

Kijewski · Answer 2 · 2013-04-02T22:29:49.743

With a reasonable new browser you can use Array.forEach:

[].forEach.call(document.getElementsByTagName('img'), function (img) {
    el.addEventListener('click', callback);
});

Or "old skool" (and maybe even better readable):

var imgs = document.getElementsByTagName('img');
for (var i = 0, len = imgs.length; i < len; ++i) {
    imgs[i].addEventListener('click', callback);
}

Reading the HTMLCollection.length only once can give a speed-up. It will never be slower.

You should not create a Function object for every iteration:

// Don't
for (...) {
    img[i].onclick = function () { ... }
}

// Do
function onclick () {
     // `this` will be img[i]
}
for (...) {
    img[i].onclick = onclick;
}

Thank you, all examples and explanations appreciated. – mechanicious Apr 02 '13 at 22:32 — mechanicious, Apr 02 '13 at 22:32

How do I listen on all array items?

Example

2 Answers2