How to add JavaScript event listener to first element of an unordered list

Question

I have simply an unordered list am trying to create with html5 and javascript, I want to add events to this list element eg first element.

Here is my HTML list:

<ul class="aside__list">
    <li class="one">Kutomba kuma</li>
    <li class="two">Kutomba tako</li>
    <li class="three">Kutomba mkundu</li>
    <li class="four">Kutomba malaya</li>
</ul>

JS:

var parentElements = document.getElementsByClassName('aside__list');
for (var i=0; i<parentElements.length; i++) {        
    parentElements[i].addEventListener('click', doStuff, false);
    console.log(parentElements[i]);
}

function doStuff() {
    alert('Delete me');
}

I want to add an event to the first element of my list using for loop without using a class or id, now this event applies to every list element in my list,

what do I need to change to get what I want?

Your code makes a classic performance mistake, not only by using .getElementsByClassName(), but by referencing the live node list returned by it inside of a loop. See this for an explanation. — Scott Marcus
– Scott Marcus, Commented Mar 2, 2019 at 23:43

Anurag Srivastava · Accepted Answer · 2019-03-02 23:27:31Z

4

You can use:

document.querySelector('ul.aside__list li').addEventListener('click', doStuff);

This matches the first li so you don't need to include :first-child.

answered Mar 2, 2019 at 23:27

Anurag Srivastava

14.5k4 gold badges39 silver badges47 bronze badges

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

Comments

CertainPerformance · Accepted Answer · 2019-03-02 23:29:47Z

2

Add a listener to the li which is the first child of the list, instead of to every whole .aside__list:

document.querySelector('.aside__list li:first-child').addEventListener('click', doStuff);

function doStuff() {
  console.log('Delete me');
}

<ul class="aside__list">
  <li class="one">Kutomba kuma</li>
  <li class="two">Kutomba tako</li>
  <li class="three">Kutomba mkundu</li>
  <li class="four">Kutomba malaya</li>
</ul>

As comment notes, the :first-child psuedo-selector isn't necessary since querySelector will only return the first matching element, though it may make the code's intent a bit clearer.

edited Mar 2, 2019 at 23:29

answered Mar 2, 2019 at 23:26

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

1 Comment

jhpratt Over a year ago

Semi-related, :first-child shouldn't be necessary, as querySelector only matches a single element anyways.

connexo · Accepted Answer · 2019-03-02 23:30:48Z

2

This would work for any number of ul.aside__list:

[...document.querySelectorAll('.aside__list')].forEach(
  ul => ul.firstElementChild.addEventListener('click', doStuff)
);

function doStuff() {
  console.log('Delete me');
}

<ul class="aside__list">
  <li class="one">Kutomba kuma</li>
  <li class="two">Kutomba tako</li>
  <li class="three">Kutomba mkundu</li>
  <li class="four">Kutomba malaya</li>
</ul>
<ul class="aside__list">
  <li class="one">Kutomba kuma</li>
  <li class="two">Kutomba tako</li>
  <li class="three">Kutomba mkundu</li>
  <li class="four">Kutomba malaya</li>
</ul>
<ul class="aside__list">
  <li class="one">Kutomba kuma</li>
  <li class="two">Kutomba tako</li>
  <li class="three">Kutomba mkundu</li>
  <li class="four">Kutomba malaya</li>
</ul>

answered Mar 2, 2019 at 23:30

connexo

57.2k15 gold badges112 silver badges149 bronze badges

6 Comments

jhpratt Over a year ago

Why not just querySelectorAll('.aside__list li')? The end result is the same, and it avoids fetching the entire list.

connexo Over a year ago

@jhpratt Because that would select all list items inside each list.

jhpratt Over a year ago

Whoops, tack a :first-child on the end of that then.

The Dead Man Over a year ago

Can you explain why did you choose to use foreach and not for loop as question suggest?

connexo Over a year ago

Because it's more readable, does not require an index variable and lets you access the iterated elements without using the clunky element[i] syntax.

|

Collectives™ on Stack Overflow

How to add JavaScript event listener to first element of an unordered list

3 Answers 3

Comments

1 Comment

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related