How to get the ID of the element that fired an event in JavaScript?

To get the ID of the element that fired an event in JavaScript, you can use the event.target property (or event.currentTarget in specific scenarios). Here’s a detailed guide with examples:

1. Using event.target

event.target refers to the element that directly triggered the event (e.g., the clicked button, even if nested inside another element).

Example 1: Simple Click Event

<button id="myButton" onclick="handleClick(event)">Click Me</button>

<script>
function handleClick(event) {
  const elementId = event.target.id;
  console.log("ID:", elementId); // Output: "myButton"
}
</script>

Example 2: Event Delegation (Nested Elements)

<div id="container">
  <button id="btn1">Button 1</button>
  <button id="btn2">Button 2</button>
</div>

<script>
document.getElementById("container").addEventListener("click", function(event) {
  // Get the ID of the clicked button (even if nested)
  const elementId = event.target.id;
  console.log("Clicked ID:", elementId); // Output: "btn1" or "btn2"
});
</script>

2. Using event.currentTarget

event.currentTarget refers to the element to which the event listener is attached. Use this if you want the parent’s ID, even when interacting with child elements.

<div id="parent">
  Parent (ID: parent)
  <button id="child">Child Button</button>
</div>

<script>
document.getElementById("parent").addEventListener("click", function(event) {
  console.log("currentTarget ID:", event.currentTarget.id); // Output: "parent"
  console.log("target ID:", event.target.id); // Output: "child"
});
</script>

3. Handling Edge Cases

Case 1: Child Elements Without IDs

If the clicked element has no ID (e.g., a <span> inside a button), traverse up the DOM to find the closest parent with an ID using closest().

<button id="mainBtn">
  <span>Click Here (no ID)</span>
</button>

<script>
document.getElementById("mainBtn").addEventListener("click", function(event) {
  // Get the closest parent with an ID
  const elementWithId = event.target.closest("[id]");
  console.log("ID:", elementWithId?.id); // Output: "mainBtn"
});
</script>

Case 2: Dynamic Elements

For dynamically created elements (e.g., via JavaScript), use event delegation to ensure the listener works for all current and future elements.

<ul id="dynamicList"></ul>

<script>
document.getElementById("dynamicList").addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    console.log("List Item ID:", event.target.id);
  }
});

// Dynamically add list items
const list = document.getElementById("dynamicList");
const li = document.createElement("li");
li.id = "item1";
li.textContent = "Item 1";
list.appendChild(li);
</script>

Key Notes

Property	Use Case
event.target	Get the ID of the element that directly triggered the event.
event.currentTarget	Get the ID of the element where the listener is attached (e.g., parent).
closest("[id]")	Find the closest parent with an ID if the target lacks one.

Common Pitfalls

1. No ID Assigned: Check if the element has an ID before accessing it (e.g., if (event.target.id) { ... }).
2. Legacy Browsers: Use event.target || event.srcElement for IE8 and below (not recommended for modern code).

Summary

• Use event.target.id to get the ID of the element that fired the event.
• Use event.currentTarget.id to get the ID of the element with the listener.
• For nested elements, use closest("[id]") to find the nearest parent with an ID.