I am trying to apply event delegation and so I want to update the text when I click within the li element but when I click inside a element, it won't fire. I don't want to attach the event listener directly to li as the list can be updated and there can be any element type within li.

const menu = document.querySelector('.menu');
const textField = document.querySelector('p');

menu.addEventListener('click', e => {
  if (e.target.matches('li')) {
    textField.textContent = e.target.textContent;
  }
});

li {
  padding: 1em;
  border: 1px solid red;
}

a {
  border: 1px solid blue;
}

<div class="menu">
  <ul>
    <li><a>Home</a></li>
    <li><a>Gallery</a></li>
    <li><a>About us</a></li>
  </ul>

  <p></p>
</div>

I am trying to apply event delegation and so I want to update the text when I click within the li element but when I click inside a element, it won't fire. I don't want to attach the event listener directly to li as the list can be updated and there can be any element type within li.

const menu = document.querySelector('.menu');
const textField = document.querySelector('p');

menu.addEventListener('click', e => {
  if (e.target.matches('li')) {
    textField.textContent = e.target.textContent;
  }
});

li {
  padding: 1em;
  border: 1px solid red;
}

a {
  border: 1px solid blue;
}

<div class="menu">
  <ul>
    <li><a>Home</a></li>
    <li><a>Gallery</a></li>
    <li><a>About us</a></li>
  </ul>

  <p></p>
</div>

• javascript
• dom-events
• event-delegation

Share Improve this question Follow asked Aug 23, 2021 at 15:33 noob_codernoob_coder 5511 gold badge22 silver badges88 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

If you want the li and not the anchor or any other child element, use closest

const li = e.target.closest("li");
if (li) { /* do whatever */ }

You can make use of the bubbling effect by attaching a click event listener to the parent list, ul.

const menu = document.querySelector('.menu');
const ul = menu.querySelector('ul');
const textField = document.querySelector('p');

ul.addEventListener('click', e => {
  if(e.target != ul) textField.textContent = e.target.textContent;
});

li {
  padding: 1em;
  border: 1px solid red;
}

a {
  border: 1px solid blue;
}

<div class="menu">
  <ul>
    <li><a>Home</a></li>
    <li><a>Gallery</a></li>
    <li><a>About us</a></li>
  </ul>

  <p></p>
</div>