How do you assign an event handler to multiple elements in JavaScript?

Question

I know how to do so with jQuery, and I know how to do so with event delegation. But how do you do so in plain JavaScript?

For example, how do you assign an event handler to a bunch of lis?

I see that var li = document.querySelectorAll('li');. Returns an array-like thing. Do you just loop through and assign handlers? I feel like there must be a better way. If not, what's the best way to loop through the array-like thing (and what is the array-like thing called?)?

Is this a serious question? Yes, when you have a collection, and you want to apply some behavior to each element in the collection, you can iterate the collection and operate on individual members. There is no better way. This is exactly what jQuery does. — user1106925
– user1106925, Commented Oct 14, 2014 at 1:46
@squint I figured that there would be a way to do something like li.<add listeners to each>. I'm still learning to program, but in hindsight what you said makes sense. Still, I think it's a completely understandable question for a student to have. — Adam Zerner
– Adam Zerner, Commented Oct 14, 2014 at 1:50
you should probably use delegation instead of adding a lot of events manually in a loop. you just buind the click (or whatever) to the UL instead of the LI, and check e.target instead of this inside the handler. — dandavis
– dandavis, Commented Oct 14, 2014 at 2:09

Ram · Accepted Answer · 2014-10-14 01:50:51Z

1

Yes, you should loop through the collection and assign the handlers individually. jQuery also does this behind the scenes.

querySelectorAll returns a NodeList which is an array-like object.

For looping through the list, you can either use a for loop:

var list = document.querySelectorAll('li'),
    l = list.length,
    li;

for (var i = 0; i < l; i++) {
   li = list.item(i);
   // ...
}

Or use the forEach method:

[].forEach.call(document.querySelectorAll('li'), function(li) {
    // ...
});

edited Oct 14, 2014 at 1:50

answered Oct 14, 2014 at 1:41

Ram

145k16 gold badges174 silver badges201 bronze badges

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

3 Comments

Adam Zerner Over a year ago

How do you loop through it? forEach isn't working.

Felix Kling Over a year ago

@AdamZerner: With a for loop. "array-like" means that the object has a length and numerical properties.

Adam Zerner Over a year ago

Ok, thanks. I wasn't sure what the keys were so I was afraid to do a for loop but the keys seem to be numerical indicies like an array.

Collectives™ on Stack Overflow

How do you assign an event handler to multiple elements in JavaScript?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related