Clicked Element's id

Getting the id of a Clicked Element

event.target.id works when the click lands on the element itself, but target may be an icon inside it. event.currentTarget.id (or this.id in a regular function) gives the element the listener is on; closest() finds the wanted ancestor.

Finding the clicked button from one toolbar listenerHTMLLive

<nav><button id="bold"><b>B</b></button> <button id="italic"><i>I</i></button></nav>
<output></output>
<script>
  const log = (e) => (e.currentTarget.nextElementSibling.textContent +=
    `<${e.target.localName}> is in #${e.target.closest("button").id}; `);
  document.querySelector("nav").addEventListener("click", log);
  document.querySelector("#italic i").click();
  document.querySelector("#bold").click();
</script>

Browser output of Listing 8.55 — Browser output of 55

This one-listener approach, event delegation, is developed in Delegation and Batching.

MENU