{
  "id": 10316920,
  "title": "JavaScript Concepts I Wish I Understood Earlier: Event Bubbling & Event Delegation",
  "url": "https://urgent.news/2026/09/27/javascript-concepts-i-wish-i-understood-earlier-event-bubbling-event",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-09-27T23:38:47.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/osaaroh/javascript-concepts-i-wish-i-understood-earlier-event-bubbling-event-delegation-28k9"
  },
  "original_language": "en",
  "account": "In the world of JavaScript, one concept that is essential to understand is event bubbling and event delegation. These concepts can help make your code more efficient and easier to manage.\n\nImagine you're creating an FAQ section with accordion/drop-down buttons for each question. Each question has a button that, when clicked, reveals the answer while closing any other open answers. This creates a simple structure like this:\n\n<div class=\"acc\">\n<div class=\"acc-item\" data-id=\"1\">\n<h3 class=\"acc-title\">Question 1</h3>\n<button class=\"acc-icon-container\">+</button>\n<p class=\"acc-content hide\">Answer 1</p>\n</div>\n<!-- Repeat the above structure for other questions -->\n</div>\n\nThe issue with the traditional way of handling this was using separate listeners for each button and content. This approach created a direct relationship between the buttons, content, and headers, relying on the index to keep everything connected. This was fine, but it had its downsides. The index had to maintain the structure and order of the elements, which could be a problem if the structure changed.\n\nThe better approach is Event Delegation. Instead of attaching an event listener to every button, you can attach one listener to the parent container:\n\nconst accordionList = document.querySelector('.acc');\naccordionList.addEventListener('click', (event) => {\n// ...\n});\n\nThis way, you have a single listener for the entire accordion. But how does the parent know which button was clicked? This is where event bubbling comes in. Event bubbling is when an event is triggered on an element, but continues to propagate up the DOM tree until it reaches the root element.\n\nTo determine which button was clicked, you can access the target of the event in your event listener:\n\naccList.addEventListener('click', (event) => {\nconst target = event.target;\n\nif (target.matches('.acc-icon-container')) {\n// Handle button click\n}\n});\n\nThis approach is much more efficient as it reduces the number of listeners and simplifies the code. The parent container can handle the event for all its children, making the code cleaner and easier to maintain. This is a powerful technique that every JavaScript developer should understand and use in their projects.",
  "summary": "\"With AI writing the code, maybe it's time we finally understand what the code is doing.\" 😅 The rise of AI has made writing code easier than ever. It has also made one thing increasingly important for me: actually understanding JavaScript. After a year away from frontend development, I found myself coming back to JavaScript feeling more than a little disoriented, especially with the AI boom, and…",
  "key_points": [],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}