Adding event listeners to multiple elements with JavaScript

Question

What I am trying to do is target all the a tags within #menu-wrap li's. I'm fairly new to JS so I'm sorry if I'm missing something obvious!

JavaScript:

var menuLink = document.querySelector( '#menu-wrap li' );    
for (var i = 0; i < menuLink.children.length; i++) {
var childElement = menuLink.children[i];
childElement.addEventListener('click', doSomething, false);
}

function doSomething() {
    alert("Hello");
}

HTML

<div class="menu-wrap" id="menu-wrap">
    <nav class="menu">
        <ul id="menu-mobile-menu" class="menu">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 1</a></li>
        </ul>
    </nav>              
</div>

a better way: you can use one event on the <UL> instead of many events on the <LI>s. it's called delegation, look into it before you learn the harder-old-fashioned way of explicit manual subscription. — dandavis
– dandavis, Commented Jan 10, 2016 at 21:30
@dandavis, do you have a good reference about event delegation in raw javascript? I have already used the jQuery.on and interested to know the other way. Thanks in advance — Adib Aroui
– Adib Aroui, Commented Jan 10, 2016 at 22:37

Quentin · Accepted Answer · 2016-01-10 21:28:37Z

3

querySelector:

Returns the first element within the document (using depth-first pre-order traversal of the document's nodes|by first element in document markup and iterating through sequential nodes by order of amount of child nodes) that matches the specified group of selectors.

You want to use querySelectorAll and then loop over the resulting node list (or you want to bind your event handler to #menu-wrap itself and then use event.target to determine which list item was clicked on).

List items are not designed to be interactive controls. You should use a link or button instead.

answered Jan 10, 2016 at 21:28

Quentin

948k136 gold badges1.3k silver badges1.4k bronze badges

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

3 Comments

Adib Aroui Over a year ago

+ one, also for the last advice because robots semantically consider <li> to be list items and not links.

Quentin Over a year ago

More to the point, users of linear navigation devices (i.e. those who don't use a mouse / trackpad / etc, such as many screen reader users), can't focus the elements in order to activate them.

Adib Aroui Over a year ago

yes true! thank you. could you just please intervene on Rando Hinn answer (someone downvoted it without explaining while it is working for me here on jsfiddle). What are reasons of it nor being the appropriate approach? Thanks again for your usual sharing

Rando Hinn · Accepted Answer · 2016-01-10 21:38:29Z

-1

Document.querySelector gets the first element only. But you can do this with classes. Do this. Just attatch class sth to anything you want to have the function.

HTML

<div class="menu-wrap" id="menu-wrap">
            <nav class="menu">
                <ul id="menu-mobile-menu" class="menu">
                    <li class="sth"><a href="#">Link 1</a></li>
                    <li class="sth"><a href="#">Link 2</a></li>
                    <li class="sth"><a href="#">Link 1</a></li>
                </ul>
            </nav>
</div>

JS

var menuLink = document.getElementsByClassName("sth");
for(var i = 0; i <  menuLink.length; i++ ) {
    var childElement = menuLink[i];
    childElement.addEventListener('click', doSomething, false);
}

function doSomething() {
    alert("Hello");
}

answered Jan 10, 2016 at 21:38

Rando Hinn

1,31921 silver badges45 bronze badges

2 Comments

Adib Aroui Over a year ago

This annswer has been downvoted without explanation from downvoter, while I need as a newbie to know what is the reason behind choosing querySelectorAll insteal of class attribute.

Adib Aroui Over a year ago

stackoverflow.com/questions/34711536/…

Collectives™ on Stack Overflow

Adding event listeners to multiple elements with JavaScript

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related