{"id":22661,"date":"2026-01-29T07:23:55","date_gmt":"2026-01-29T07:23:55","guid":{"rendered":"https:\/\/www.kaashivinfotech.com\/blog\/?p=22661"},"modified":"2026-01-29T07:23:55","modified_gmt":"2026-01-29T07:23:55","slug":"event-delegation-and-event-bubbling-in-javascript","status":"publish","type":"post","link":"https:\/\/www.kaashivinfotech.com\/blog\/event-delegation-and-event-bubbling-in-javascript\/","title":{"rendered":"Event Delegation and Event Bubbling in JavaScript \u2013 A Complete In-Depth Guide"},"content":{"rendered":"<p data-start=\"322\" data-end=\"609\">Event Delegation and Event Bubbling in\u00a0<a href=\"https:\/\/www.wikitechy.com\/tutorials\/javascript\/\" target=\"_blank\" rel=\"noopener\">JavaScript<\/a> works on an event-driven programming model, meaning most interactions in a web application are triggered by user actions such as clicks, scrolls, key presses, and form submissions. As applications grow bigger and more dynamic, handling events efficiently becomes critical.<\/p>\n<p data-start=\"611\" data-end=\"833\">Two core concepts that every JavaScript developer must understand are <strong data-start=\"681\" data-end=\"699\">Event Bubbling<\/strong> and <strong data-start=\"704\" data-end=\"724\">Event Delegation<\/strong>. These concepts are not just theory\u2014they directly impact performance, scalability, and code maintainability.<\/p>\n<p data-start=\"835\" data-end=\"950\">This article covers everything from fundamentals to advanced use cases, with practical examples and best practices.<\/p>\n<h3 data-start=\"835\" data-end=\"950\">Event Delegation and Event Bubbling in JavaScript<\/h3>\n<hr data-start=\"952\" data-end=\"955\" \/>\n<h2 data-start=\"957\" data-end=\"997\">Understanding Events in JavaScript<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-22662 \" src=\"https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2026\/01\/Understanding-Events-in-JavaScript.webp\" alt=\"\" width=\"566\" height=\"283\" srcset=\"https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2026\/01\/Understanding-Events-in-JavaScript.webp 750w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2026\/01\/Understanding-Events-in-JavaScript-300x150.webp 300w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2026\/01\/Understanding-Events-in-JavaScript-440x220.webp 440w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2026\/01\/Understanding-Events-in-JavaScript-680x340.webp 680w\" sizes=\"auto, (max-width: 566px) 100vw, 566px\" \/><\/p>\n<p data-start=\"999\" data-end=\"1084\">An <strong data-start=\"1002\" data-end=\"1011\">event<\/strong> is something that happens in the browser that JavaScript can respond to.<\/p>\n<h3 data-start=\"1086\" data-end=\"1114\">Common JavaScript Events<\/h3>\n<ul data-start=\"1115\" data-end=\"1229\">\n<li data-start=\"1115\" data-end=\"1124\">\n<p data-start=\"1117\" data-end=\"1124\"><code class=\"\" data-line=\"\">click<\/code><\/p>\n<\/li>\n<li data-start=\"1125\" data-end=\"1137\">\n<p data-start=\"1127\" data-end=\"1137\"><code class=\"\" data-line=\"\">dblclick<\/code><\/p>\n<\/li>\n<li data-start=\"1138\" data-end=\"1151\">\n<p data-start=\"1140\" data-end=\"1151\"><code class=\"\" data-line=\"\">mouseover<\/code><\/p>\n<\/li>\n<li data-start=\"1152\" data-end=\"1164\">\n<p data-start=\"1154\" data-end=\"1164\"><code class=\"\" data-line=\"\">mouseout<\/code><\/p>\n<\/li>\n<li data-start=\"1165\" data-end=\"1176\">\n<p data-start=\"1167\" data-end=\"1176\"><code class=\"\" data-line=\"\">keydown<\/code><\/p>\n<\/li>\n<li data-start=\"1177\" data-end=\"1186\">\n<p data-start=\"1179\" data-end=\"1186\"><code class=\"\" data-line=\"\">keyup<\/code><\/p>\n<\/li>\n<li data-start=\"1187\" data-end=\"1197\">\n<p data-start=\"1189\" data-end=\"1197\"><code class=\"\" data-line=\"\">submit<\/code><\/p>\n<\/li>\n<li data-start=\"1198\" data-end=\"1208\">\n<p data-start=\"1200\" data-end=\"1208\"><code class=\"\" data-line=\"\">change<\/code><\/p>\n<\/li>\n<li data-start=\"1209\" data-end=\"1218\">\n<p data-start=\"1211\" data-end=\"1218\"><code class=\"\" data-line=\"\">input<\/code><\/p>\n<\/li>\n<li data-start=\"1219\" data-end=\"1229\">\n<p data-start=\"1221\" data-end=\"1229\"><code class=\"\" data-line=\"\">scroll<\/code><\/p>\n<\/li>\n<\/ul>\n<p data-start=\"1231\" data-end=\"1352\">JavaScript allows us to attach <strong data-start=\"1262\" data-end=\"1281\">event listeners<\/strong> to HTML elements so that when an event occurs, a function is executed.<\/p>\n<h3 data-start=\"1354\" data-end=\"1386\">Basic Event Listener Example<\/h3>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;button id=\"btn\"&gt;Click Me&lt;\/button&gt;\r\n\r\n&lt;script&gt;\r\n  document.getElementById(\"btn\").addEventListener(\"click\", function () {\r\n    console.log(\"Button clicked\");\r\n  });\r\n&lt;\/script&gt;\r\n<\/pre>\n<hr data-start=\"1570\" data-end=\"1573\" \/>\n<h2 data-start=\"1575\" data-end=\"1621\">2. Event Flow: How Events Travel in the DOM<\/h2>\n<p data-start=\"1623\" data-end=\"1765\">When an event occurs, it does <strong data-start=\"1653\" data-end=\"1660\">not<\/strong> just stay on the clicked element. It travels through the DOM in a defined order known as <strong data-start=\"1750\" data-end=\"1764\">event flow<\/strong>.<\/p>\n<h3 data-start=\"1767\" data-end=\"1801\">The Three Phases of Event Flow<\/h3>\n<ol data-start=\"1803\" data-end=\"2089\">\n<li data-start=\"1803\" data-end=\"1933\">\n<p data-start=\"1806\" data-end=\"1825\"><strong data-start=\"1806\" data-end=\"1825\">Capturing Phase<\/strong><\/p>\n<ul data-start=\"1829\" data-end=\"1933\">\n<li data-start=\"1829\" data-end=\"1861\">\n<p data-start=\"1831\" data-end=\"1861\">Event starts from the <code class=\"\" data-line=\"\">window<\/code><\/p>\n<\/li>\n<li data-start=\"1865\" data-end=\"1933\">\n<p data-start=\"1867\" data-end=\"1933\">Travels down through <code class=\"\" data-line=\"\">document<\/code> \u2192 <code class=\"\" data-line=\"\">html<\/code> \u2192 <code class=\"\" data-line=\"\">body<\/code> \u2192 target element<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li data-start=\"1935\" data-end=\"2003\">\n<p data-start=\"1938\" data-end=\"1954\"><strong data-start=\"1938\" data-end=\"1954\">Target Phase<\/strong><\/p>\n<ul data-start=\"1958\" data-end=\"2003\">\n<li data-start=\"1958\" data-end=\"2003\">\n<p data-start=\"1960\" data-end=\"2003\">Event reaches the element that triggered it<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li data-start=\"2005\" data-end=\"2089\">\n<p data-start=\"2008\" data-end=\"2026\"><strong data-start=\"2008\" data-end=\"2026\">Bubbling Phase<\/strong><\/p>\n<ul data-start=\"2030\" data-end=\"2089\">\n<li data-start=\"2030\" data-end=\"2089\">\n<p data-start=\"2032\" data-end=\"2089\">Event travels back up from the target element to the root<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p data-start=\"2091\" data-end=\"2158\">By default, JavaScript listens to events in the <strong data-start=\"2139\" data-end=\"2157\">bubbling phase<\/strong>.<\/p>\n<hr data-start=\"2160\" data-end=\"2163\" \/>\n<h2 data-start=\"2165\" data-end=\"2194\">What Is Event Bubbling?<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-22663 \" src=\"https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2026\/01\/What-Is-Event-Bubbling.webp\" alt=\"\" width=\"499\" height=\"281\" srcset=\"https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2026\/01\/What-Is-Event-Bubbling.webp 1920w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2026\/01\/What-Is-Event-Bubbling-300x169.webp 300w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2026\/01\/What-Is-Event-Bubbling-1024x576.webp 1024w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2026\/01\/What-Is-Event-Bubbling-768x432.webp 768w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2026\/01\/What-Is-Event-Bubbling-1536x864.webp 1536w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2026\/01\/What-Is-Event-Bubbling-440x248.webp 440w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2026\/01\/What-Is-Event-Bubbling-680x383.webp 680w\" sizes=\"auto, (max-width: 499px) 100vw, 499px\" \/><\/p>\n<p data-start=\"2196\" data-end=\"2342\"><strong data-start=\"2196\" data-end=\"2214\">Event bubbling<\/strong> means that an event triggered on a child element will automatically propagate to its parent elements unless explicitly stopped.<\/p>\n<h3 data-start=\"2344\" data-end=\"2371\">Simple Bubbling Example<\/h3>\n<div class=\"contain-inline-size rounded-2xl corner-superellipse\/1.1 relative bg-token-sidebar-surface-primary\">\n<div class=\"sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl\/main:top-9\">\n<div class=\"absolute end-0 bottom-0 flex h-9 items-center pe-2\">\n<div class=\"bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;div id=\"box\"&gt;\r\n  &lt;button id=\"btn\"&gt;Click&lt;\/button&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;script&gt;\r\n  document.getElementById(\"box\").addEventListener(\"click\", function () {\r\n    console.log(\"Div clicked\");\r\n  });\r\n\r\n  document.getElementById(\"btn\").addEventListener(\"click\", function () {\r\n    console.log(\"Button clicked\");\r\n  });\r\n&lt;\/script&gt;\r\n<\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h3 data-start=\"2688\" data-end=\"2714\">Output on Button Click<\/h3>\n<div class=\"contain-inline-size rounded-2xl corner-superellipse\/1.1 relative bg-token-sidebar-surface-primary\">\n<div class=\"sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl\/main:top-9\">\n<div class=\"absolute end-0 bottom-0 flex h-9 items-center pe-2\">\n<div class=\"bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">Button clicked\r\nDiv clicked\r\n<\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"2751\" data-end=\"2813\">The event starts at the button and then bubbles up to the div.<\/p>\n<hr data-start=\"2815\" data-end=\"2818\" \/>\n<h2 data-start=\"2820\" data-end=\"2868\">Real-World Visualization of Event Bubbling<\/h2>\n<p data-start=\"2870\" data-end=\"2904\">Think of event bubbling like this:<\/p>\n<p data-start=\"2906\" data-end=\"2999\">\ud83d\udc49 You shout inside a room<br data-start=\"2932\" data-end=\"2935\" \/>\ud83d\udc49 Sound reaches the walls<br data-start=\"2961\" data-end=\"2964\" \/>\ud83d\udc49 Sound travels outside the room<\/p>\n<p data-start=\"3001\" data-end=\"3011\">Similarly:<\/p>\n<ul data-start=\"3012\" data-end=\"3097\">\n<li data-start=\"3012\" data-end=\"3036\">\n<p data-start=\"3014\" data-end=\"3036\">Event happens on child<\/p>\n<\/li>\n<li data-start=\"3037\" data-end=\"3054\">\n<p data-start=\"3039\" data-end=\"3054\">Parent hears it<\/p>\n<\/li>\n<li data-start=\"3055\" data-end=\"3077\">\n<p data-start=\"3057\" data-end=\"3077\">Grandparent hears it<\/p>\n<\/li>\n<li data-start=\"3078\" data-end=\"3097\">\n<p data-start=\"3080\" data-end=\"3097\">Document hears it<\/p>\n<\/li>\n<\/ul>\n<hr data-start=\"3099\" data-end=\"3102\" \/>\n<h2 data-start=\"3104\" data-end=\"3133\">Stopping Event Bubbling<\/h2>\n<p data-start=\"3135\" data-end=\"3217\">Sometimes bubbling causes unwanted behavior. JavaScript provides a way to stop it.<\/p>\n<h3 data-start=\"3219\" data-end=\"3248\"><code class=\"\" data-line=\"\">event.stopPropagation()<\/code><\/h3>\n<div class=\"contain-inline-size rounded-2xl corner-superellipse\/1.1 relative bg-token-sidebar-surface-primary\">\n<div class=\"sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl\/main:top-9\">\n<div class=\"absolute end-0 bottom-0 flex h-9 items-center pe-2\">\n<div class=\"bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">document.getElementById(\"btn\").addEventListener(\"click\", function (event) {\r\n  event.stopPropagation();\r\n  console.log(\"Button clicked\");\r\n});\r\n<\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"3409\" data-end=\"3465\">Now the parent div will <strong data-start=\"3433\" data-end=\"3440\">not<\/strong> receive the click event.<\/p>\n<p data-start=\"3467\" data-end=\"3531\">\u26a0\ufe0f Use this carefully. Overusing it can break expected behavior.<\/p>\n<hr data-start=\"3533\" data-end=\"3536\" \/>\n<h2 data-start=\"3538\" data-end=\"3568\">What Is Event Capturing?<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-22664 \" src=\"https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2026\/01\/event-capture.webp\" alt=\"\" width=\"636\" height=\"364\" srcset=\"https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2026\/01\/event-capture.webp 800w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2026\/01\/event-capture-300x172.webp 300w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2026\/01\/event-capture-768x440.webp 768w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2026\/01\/event-capture-440x252.webp 440w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2026\/01\/event-capture-680x389.webp 680w\" sizes=\"auto, (max-width: 636px) 100vw, 636px\" \/><\/p>\n<p data-start=\"3570\" data-end=\"3677\">Event capturing is the reverse of bubbling. The event flows <strong data-start=\"3630\" data-end=\"3676\">from the top of the DOM down to the target<\/strong>.<\/p>\n<h3 data-start=\"3679\" data-end=\"3701\">Enabling Capturing<\/h3>\n<div class=\"contain-inline-size rounded-2xl corner-superellipse\/1.1 relative bg-token-sidebar-surface-primary\">\n<div class=\"sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl\/main:top-9\">\n<div class=\"absolute end-0 bottom-0 flex h-9 items-center pe-2\">\n<div class=\"bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">element.addEventListener(\"click\", handler, true);\r\n<\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h3 data-start=\"3772\" data-end=\"3793\">Capturing Example<\/h3>\n<div class=\"contain-inline-size rounded-2xl corner-superellipse\/1.1 relative bg-token-sidebar-surface-primary\">\n<div class=\"sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl\/main:top-9\">\n<div class=\"absolute end-0 bottom-0 flex h-9 items-center pe-2\">\n<div class=\"bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">document.getElementById(\"box\").addEventListener(\r\n  \"click\",\r\n  function () {\r\n    console.log(\"Div clicked\");\r\n  },\r\n  true\r\n);\r\n<\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h3 data-start=\"3937\" data-end=\"3963\">Output on Button Click<\/h3>\n<div class=\"contain-inline-size rounded-2xl corner-superellipse\/1.1 relative bg-token-sidebar-surface-primary\">\n<div class=\"sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl\/main:top-9\">\n<div class=\"absolute end-0 bottom-0 flex h-9 items-center pe-2\">\n<div class=\"bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">Div clicked\r\nButton clicked\r\n<\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"4000\" data-end=\"4085\">Event capturing is rarely used in real projects but is useful in specific edge cases.<\/p>\n<hr data-start=\"4087\" data-end=\"4090\" \/>\n<h2 data-start=\"4092\" data-end=\"4137\">Why Understanding Bubbling Is Important<\/h2>\n<ul data-start=\"4139\" data-end=\"4303\">\n<li data-start=\"4139\" data-end=\"4187\">\n<p data-start=\"4141\" data-end=\"4187\">It explains unexpected multiple event triggers<\/p>\n<\/li>\n<li data-start=\"4188\" data-end=\"4214\">\n<p data-start=\"4190\" data-end=\"4214\">It helps debug UI issues<\/p>\n<\/li>\n<li data-start=\"4215\" data-end=\"4261\">\n<p data-start=\"4217\" data-end=\"4261\">It is the foundation of <strong data-start=\"4241\" data-end=\"4261\">event delegation<\/strong><\/p>\n<\/li>\n<li data-start=\"4262\" data-end=\"4303\">\n<p data-start=\"4264\" data-end=\"4303\">Modern frameworks rely on it internally<\/p>\n<\/li>\n<\/ul>\n<hr data-start=\"4305\" data-end=\"4308\" \/>\n<h2 data-start=\"4310\" data-end=\"4341\">What Is Event Delegation?<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-22665 \" src=\"https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2026\/01\/event-delegation-in-javascript.webp\" alt=\"\" width=\"446\" height=\"412\" srcset=\"https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2026\/01\/event-delegation-in-javascript.webp 868w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2026\/01\/event-delegation-in-javascript-300x277.webp 300w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2026\/01\/event-delegation-in-javascript-768x709.webp 768w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2026\/01\/event-delegation-in-javascript-440x406.webp 440w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2026\/01\/event-delegation-in-javascript-680x628.webp 680w\" sizes=\"auto, (max-width: 446px) 100vw, 446px\" \/><\/p>\n<p data-start=\"4343\" data-end=\"4502\"><strong data-start=\"4343\" data-end=\"4363\">Event delegation<\/strong> is a design pattern where you attach <strong data-start=\"4401\" data-end=\"4443\">one event listener to a parent element<\/strong> instead of attaching listeners to multiple child elements.<\/p>\n<p data-start=\"4504\" data-end=\"4543\">It works because of <strong data-start=\"4524\" data-end=\"4542\">event bubbling<\/strong>.<\/p>\n<h3 data-start=\"4545\" data-end=\"4557\">Key Idea<\/h3>\n<blockquote data-start=\"4558\" data-end=\"4601\">\n<p data-start=\"4560\" data-end=\"4601\">\u201cListen on the parent, act on the child.\u201d<\/p>\n<\/blockquote>\n<hr data-start=\"4603\" data-end=\"4606\" \/>\n<h2 data-start=\"4608\" data-end=\"4646\">Problem Without Event Delegation<\/h2>\n<div class=\"contain-inline-size rounded-2xl corner-superellipse\/1.1 relative bg-token-sidebar-surface-primary\">\n<div class=\"sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl\/main:top-9\">\n<div class=\"absolute end-0 bottom-0 flex h-9 items-center pe-2\">\n<div class=\"bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;ul&gt;\r\n  &lt;li&gt;Home&lt;\/li&gt;\r\n  &lt;li&gt;About&lt;\/li&gt;\r\n  &lt;li&gt;Contact&lt;\/li&gt;\r\n&lt;\/ul&gt;\r\n\r\n&lt;script&gt;\r\n  document.querySelectorAll(\"li\").forEach(function (item) {\r\n    item.addEventListener(\"click\", function () {\r\n      console.log(item.textContent);\r\n    });\r\n  });\r\n&lt;\/script&gt;\r\n<\/pre>\n<p>&nbsp;<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h3 data-start=\"4904\" data-end=\"4917\">Problems:<\/h3>\n<ul data-start=\"4918\" data-end=\"5031\">\n<li data-start=\"4918\" data-end=\"4944\">\n<p data-start=\"4920\" data-end=\"4944\">Too many event listeners<\/p>\n<\/li>\n<li data-start=\"4945\" data-end=\"4979\">\n<p data-start=\"4947\" data-end=\"4979\">Poor performance for large lists<\/p>\n<\/li>\n<li data-start=\"4980\" data-end=\"5010\">\n<p data-start=\"4982\" data-end=\"5010\">Newly added items won\u2019t work<\/p>\n<\/li>\n<li data-start=\"5011\" data-end=\"5031\">\n<p data-start=\"5013\" data-end=\"5031\">Harder to maintain<\/p>\n<\/li>\n<\/ul>\n<hr data-start=\"5033\" data-end=\"5036\" \/>\n<h2 data-start=\"5038\" data-end=\"5070\">Event Delegation Solution<\/h2>\n<div class=\"contain-inline-size rounded-2xl corner-superellipse\/1.1 relative bg-token-sidebar-surface-primary\">\n<div class=\"sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl\/main:top-9\">\n<div class=\"absolute end-0 bottom-0 flex h-9 items-center pe-2\">\n<div class=\"bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;ul id=\"menu\"&gt;\r\n  &lt;li&gt;Home&lt;\/li&gt;\r\n  &lt;li&gt;About&lt;\/li&gt;\r\n  &lt;li&gt;Contact&lt;\/li&gt;\r\n&lt;\/ul&gt;\r\n\r\n&lt;script&gt;\r\n  document.getElementById(\"menu\").addEventListener(\"click\", function (event) {\r\n    if (event.target.tagName === \"LI\") {\r\n      console.log(event.target.textContent);\r\n    }\r\n  });\r\n&lt;\/script&gt;\r\n<\/pre>\n<p>&nbsp;<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"5355\" data-end=\"5400\">Only <strong data-start=\"5360\" data-end=\"5376\">one listener<\/strong> handles all list items.<\/p>\n<hr data-start=\"5402\" data-end=\"5405\" \/>\n<h2 data-start=\"5407\" data-end=\"5451\">Dynamic Elements and Event Delegation<\/h2>\n<div class=\"contain-inline-size rounded-2xl corner-superellipse\/1.1 relative bg-token-sidebar-surface-primary\">\n<div class=\"sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl\/main:top-9\">\n<div class=\"absolute end-0 bottom-0 flex h-9 items-center pe-2\">\n<div class=\"bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">const menu = document.getElementById(\"menu\");\r\n\r\nconst li = document.createElement(\"li\");\r\nli.textContent = \"Blog\";\r\nmenu.appendChild(li);\r\n<\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"5607\" data-end=\"5676\">\u2705 The new item works automatically<br data-start=\"5641\" data-end=\"5644\" \/>\u274c No need to add new listeners<\/p>\n<p data-start=\"5678\" data-end=\"5740\">This is one of the <strong data-start=\"5697\" data-end=\"5719\">biggest advantages<\/strong> of event delegation.<\/p>\n<hr data-start=\"5742\" data-end=\"5745\" \/>\n<h2 data-start=\"5747\" data-end=\"5793\"><code class=\"\" data-line=\"\">event.target<\/code> vs <code class=\"\" data-line=\"\">event.currentTarget<\/code><\/h2>\n<div class=\"TyagGW_tableContainer\">\n<div class=\"group TyagGW_tableWrapper flex flex-col-reverse w-fit\" tabindex=\"-1\">\n<table class=\"w-fit min-w-(--thread-content-width)\" data-start=\"5795\" data-end=\"5934\">\n<thead data-start=\"5795\" data-end=\"5817\">\n<tr data-start=\"5795\" data-end=\"5817\">\n<th data-start=\"5795\" data-end=\"5806\" data-col-size=\"sm\">Property<\/th>\n<th data-start=\"5806\" data-end=\"5817\" data-col-size=\"sm\">Meaning<\/th>\n<\/tr>\n<\/thead>\n<tbody data-start=\"5837\" data-end=\"5934\">\n<tr data-start=\"5837\" data-end=\"5880\">\n<td data-start=\"5837\" data-end=\"5854\" data-col-size=\"sm\"><code class=\"\" data-line=\"\">event.target<\/code><\/td>\n<td data-col-size=\"sm\" data-start=\"5854\" data-end=\"5880\">Actual element clicked<\/td>\n<\/tr>\n<tr data-start=\"5881\" data-end=\"5934\">\n<td data-start=\"5881\" data-end=\"5905\" data-col-size=\"sm\"><code class=\"\" data-line=\"\">event.currentTarget<\/code><\/td>\n<td data-col-size=\"sm\" data-start=\"5905\" data-end=\"5934\">Element with the listener<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<h3 data-start=\"5936\" data-end=\"5947\">Example<\/h3>\n<div class=\"contain-inline-size rounded-2xl corner-superellipse\/1.1 relative bg-token-sidebar-surface-primary\">\n<div class=\"sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl\/main:top-9\">\n<div class=\"absolute end-0 bottom-0 flex h-9 items-center pe-2\">\n<div class=\"bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">menu.addEventListener(\"click\", function (event) {\r\n  console.log(event.target);        \/\/ LI\r\n  console.log(event.currentTarget); \/\/ UL\r\n});\r\n<\/pre>\n<p>&nbsp;<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<hr data-start=\"6106\" data-end=\"6109\" \/>\n<h2 data-start=\"6111\" data-end=\"6148\">Filtering Events in Delegation<\/h2>\n<p data-start=\"6150\" data-end=\"6193\">Always <strong data-start=\"6157\" data-end=\"6167\">filter<\/strong> the target before acting.<\/p>\n<div class=\"contain-inline-size rounded-2xl corner-superellipse\/1.1 relative bg-token-sidebar-surface-primary\">\n<div class=\"sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl\/main:top-9\">\n<div class=\"absolute end-0 bottom-0 flex h-9 items-center pe-2\">\n<div class=\"bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">if (event.target.matches(\"li.active\")) {\r\n  \/\/ logic here\r\n}\r\n<\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"6273\" data-end=\"6305\">This avoids accidental triggers.<\/p>\n<hr data-start=\"6307\" data-end=\"6310\" \/>\n<h2 data-start=\"6312\" data-end=\"6350\">Delegation with Nested Elements<\/h2>\n<div class=\"contain-inline-size rounded-2xl corner-superellipse\/1.1 relative bg-token-sidebar-surface-primary\">\n<div class=\"sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl\/main:top-9\">\n<div class=\"absolute end-0 bottom-0 flex h-9 items-center pe-2\">\n<div class=\"bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;ul id=\"list\"&gt;\r\n  &lt;li&gt;&lt;span&gt;Item 1&lt;\/span&gt;&lt;\/li&gt;\r\n&lt;\/ul&gt;\r\n<\/pre>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">list.addEventListener(\"click\", function (event) {\r\n  const li = event.target.closest(\"li\");\r\n  if (li) {\r\n    console.log(li.textContent);\r\n  }\r\n});\r\n<\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"6580\" data-end=\"6627\">Using <code class=\"\" data-line=\"\">closest()<\/code> makes delegation more robust.<\/p>\n<hr data-start=\"6629\" data-end=\"6632\" \/>\n<h2 data-start=\"6634\" data-end=\"6681\">Performance Benefits of Event Delegation<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-22666 \" src=\"https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2026\/01\/keytakeaways.webp\" alt=\"\" width=\"622\" height=\"282\" srcset=\"https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2026\/01\/keytakeaways.webp 1718w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2026\/01\/keytakeaways-300x136.webp 300w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2026\/01\/keytakeaways-1024x464.webp 1024w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2026\/01\/keytakeaways-768x348.webp 768w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2026\/01\/keytakeaways-1536x696.webp 1536w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2026\/01\/keytakeaways-440x199.webp 440w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2026\/01\/keytakeaways-680x308.webp 680w\" sizes=\"auto, (max-width: 622px) 100vw, 622px\" \/><\/p>\n<ul data-start=\"6683\" data-end=\"6796\">\n<li data-start=\"6683\" data-end=\"6706\">\n<p data-start=\"6685\" data-end=\"6706\">Fewer event listeners<\/p>\n<\/li>\n<li data-start=\"6707\" data-end=\"6727\">\n<p data-start=\"6709\" data-end=\"6727\">Lower memory usage<\/p>\n<\/li>\n<li data-start=\"6728\" data-end=\"6746\">\n<p data-start=\"6730\" data-end=\"6746\">Faster page load<\/p>\n<\/li>\n<li data-start=\"6747\" data-end=\"6767\">\n<p data-start=\"6749\" data-end=\"6767\">Better scalability<\/p>\n<\/li>\n<li data-start=\"6768\" data-end=\"6796\">\n<p data-start=\"6770\" data-end=\"6796\">Cleaner garbage collection<\/p>\n<\/li>\n<\/ul>\n<p data-start=\"6798\" data-end=\"6819\">This is critical for:<\/p>\n<ul data-start=\"6820\" data-end=\"6903\">\n<li data-start=\"6820\" data-end=\"6851\">\n<p data-start=\"6822\" data-end=\"6851\">Tables with thousands of rows<\/p>\n<\/li>\n<li data-start=\"6852\" data-end=\"6875\">\n<p data-start=\"6854\" data-end=\"6875\">Infinite scroll lists<\/p>\n<\/li>\n<li data-start=\"6876\" data-end=\"6888\">\n<p data-start=\"6878\" data-end=\"6888\">Dashboards<\/p>\n<\/li>\n<li data-start=\"6889\" data-end=\"6903\">\n<p data-start=\"6891\" data-end=\"6903\">Admin panels<\/p>\n<\/li>\n<\/ul>\n<hr data-start=\"6905\" data-end=\"6908\" \/>\n<h2 data-start=\"6910\" data-end=\"6957\">Event Delegation in Real-World Scenarios<\/h2>\n<h3 data-start=\"6959\" data-end=\"6973\">To-Do List<\/h3>\n<ul data-start=\"6974\" data-end=\"7039\">\n<li data-start=\"6974\" data-end=\"7002\">\n<p data-start=\"6976\" data-end=\"7002\">One listener for all tasks<\/p>\n<\/li>\n<li data-start=\"7003\" data-end=\"7039\">\n<p data-start=\"7005\" data-end=\"7039\">Works with dynamically added tasks<\/p>\n<\/li>\n<\/ul>\n<h3 data-start=\"7041\" data-end=\"7051\">Tables<\/h3>\n<ul data-start=\"7052\" data-end=\"7090\">\n<li data-start=\"7052\" data-end=\"7090\">\n<p data-start=\"7054\" data-end=\"7090\">One listener for edit\/delete buttons<\/p>\n<\/li>\n<\/ul>\n<h3 data-start=\"7092\" data-end=\"7101\">Forms<\/h3>\n<ul data-start=\"7102\" data-end=\"7141\">\n<li data-start=\"7102\" data-end=\"7141\">\n<p data-start=\"7104\" data-end=\"7141\">Handle validation for multiple inputs<\/p>\n<\/li>\n<\/ul>\n<h3 data-start=\"7143\" data-end=\"7164\">Dropdowns &amp; Menus<\/h3>\n<ul data-start=\"7165\" data-end=\"7203\">\n<li data-start=\"7165\" data-end=\"7203\">\n<p data-start=\"7167\" data-end=\"7203\">One listener controls all menu items<\/p>\n<\/li>\n<\/ul>\n<hr data-start=\"7205\" data-end=\"7208\" \/>\n<h2 data-start=\"7210\" data-end=\"7232\">Common Mistakes<\/h2>\n<p data-start=\"7234\" data-end=\"7420\">\u274c Not checking <code class=\"\" data-line=\"\">event.target<\/code><br data-start=\"7263\" data-end=\"7266\" \/>\u274c Using <code class=\"\" data-line=\"\">stopPropagation()<\/code> unnecessarily<br data-start=\"7307\" data-end=\"7310\" \/>\u274c Attaching listeners inside loops<br data-start=\"7344\" data-end=\"7347\" \/>\u274c Delegating to very high-level elements like <code class=\"\" data-line=\"\">document<\/code> without reason<\/p>\n<hr data-start=\"7422\" data-end=\"7425\" \/>\n<h2 data-start=\"7427\" data-end=\"7475\">Bubbling vs Delegation \u2013 Clear Comparison<\/h2>\n<div class=\"TyagGW_tableContainer\">\n<div class=\"group TyagGW_tableWrapper flex flex-col-reverse w-fit\" tabindex=\"-1\">\n<table class=\"w-fit min-w-(--thread-content-width)\" data-start=\"7477\" data-end=\"7773\">\n<thead data-start=\"7477\" data-end=\"7523\">\n<tr data-start=\"7477\" data-end=\"7523\">\n<th data-start=\"7477\" data-end=\"7486\" data-col-size=\"sm\">Aspect<\/th>\n<th data-start=\"7486\" data-end=\"7503\" data-col-size=\"sm\">Event Bubbling<\/th>\n<th data-start=\"7503\" data-end=\"7523\" data-col-size=\"sm\">Event Delegation<\/th>\n<\/tr>\n<\/thead>\n<tbody data-start=\"7567\" data-end=\"7773\">\n<tr data-start=\"7567\" data-end=\"7616\">\n<td data-start=\"7567\" data-end=\"7574\" data-col-size=\"sm\">Type<\/td>\n<td data-start=\"7574\" data-end=\"7593\" data-col-size=\"sm\">Browser behavior<\/td>\n<td data-col-size=\"sm\" data-start=\"7593\" data-end=\"7616\">Programming pattern<\/td>\n<\/tr>\n<tr data-start=\"7617\" data-end=\"7662\">\n<td data-start=\"7617\" data-end=\"7627\" data-col-size=\"sm\">Purpose<\/td>\n<td data-col-size=\"sm\" data-start=\"7627\" data-end=\"7640\">Event flow<\/td>\n<td data-col-size=\"sm\" data-start=\"7640\" data-end=\"7662\">Efficient handling<\/td>\n<\/tr>\n<tr data-start=\"7663\" data-end=\"7695\">\n<td data-start=\"7663\" data-end=\"7677\" data-col-size=\"sm\">Performance<\/td>\n<td data-col-size=\"sm\" data-start=\"7677\" data-end=\"7687\">Neutral<\/td>\n<td data-col-size=\"sm\" data-start=\"7687\" data-end=\"7695\">High<\/td>\n<\/tr>\n<tr data-start=\"7696\" data-end=\"7727\">\n<td data-start=\"7696\" data-end=\"7715\" data-col-size=\"sm\">Dynamic elements<\/td>\n<td data-col-size=\"sm\" data-start=\"7715\" data-end=\"7720\">No<\/td>\n<td data-col-size=\"sm\" data-start=\"7720\" data-end=\"7727\">Yes<\/td>\n<\/tr>\n<tr data-start=\"7728\" data-end=\"7773\">\n<td data-start=\"7728\" data-end=\"7741\" data-col-size=\"sm\">Dependency<\/td>\n<td data-col-size=\"sm\" data-start=\"7741\" data-end=\"7750\">Native<\/td>\n<td data-col-size=\"sm\" data-start=\"7750\" data-end=\"7773\">Depends on bubbling<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<hr data-start=\"7775\" data-end=\"7778\" \/>\n<h2 data-start=\"7780\" data-end=\"7822\">How Frameworks Use Event Delegation<\/h2>\n<ul data-start=\"7824\" data-end=\"7977\">\n<li data-start=\"7824\" data-end=\"7857\">\n<p data-start=\"7826\" data-end=\"7857\"><strong data-start=\"7826\" data-end=\"7835\">React<\/strong> uses synthetic events<\/p>\n<\/li>\n<li data-start=\"7858\" data-end=\"7904\">\n<p data-start=\"7860\" data-end=\"7904\"><strong data-start=\"7860\" data-end=\"7871\">Angular<\/strong> uses event delegation internally<\/p>\n<\/li>\n<li data-start=\"7905\" data-end=\"7939\">\n<p data-start=\"7907\" data-end=\"7939\"><strong data-start=\"7907\" data-end=\"7914\">Vue<\/strong> optimizes event handling<\/p>\n<\/li>\n<li data-start=\"7940\" data-end=\"7977\">\n<p data-start=\"7942\" data-end=\"7977\">Improves performance for large apps<\/p>\n<\/li>\n<\/ul>\n<p data-start=\"7979\" data-end=\"8031\">Understanding this makes frameworks easier to learn.<\/p>\n<hr data-start=\"8033\" data-end=\"8036\" \/>\n<h2 data-start=\"8293\" data-end=\"8316\">Final Conclusion<\/h2>\n<p data-start=\"8318\" data-end=\"8493\">Event bubbling explains <strong data-start=\"8342\" data-end=\"8377\">how events move through the DOM<\/strong>, while event delegation teaches <strong data-start=\"8410\" data-end=\"8452\">how to take advantage of that movement<\/strong> to write optimized, scalable JavaScript.<\/p>\n<p data-start=\"8495\" data-end=\"8607\">If you want to write <strong data-start=\"8516\" data-end=\"8549\">professional-grade JavaScript<\/strong>, mastering these concepts is not optional\u2014it\u2019s mandatory.<\/p>\n<p data-start=\"8495\" data-end=\"8607\">Want to learn more??, Kaashiv Infotech Offers\u00a0<a href=\"https:\/\/www.kaashivinfotech.com\/front-end-developer-course\/\">Front End Development Course<\/a>,\u00a0<a href=\"https:\/\/www.kaashivinfotech.com\/courses\/\">Full Stack Development Course<\/a>\u00a0And More Visit Our Website\u00a0<a href=\"https:\/\/www.kaashivinfotech.com\/\">www.kaashivinfotech.com<\/a>.<\/p>\n<h2 data-start=\"8495\" data-end=\"8607\">Related Reads:<\/h2>\n<ul>\n<li>\n<p class=\"title\"><a href=\"https:\/\/www.kaashivinfotech.com\/blog\/form-validation-by-javascript-example\/\"><span class=\"title-span\">Client-Side Form Handling with JavaScript \u2013 Explained with Example Code<\/span><\/a><\/p>\n<\/li>\n<li>\n<p class=\"title\"><a href=\"https:\/\/www.kaashivinfotech.com\/blog\/mastering-reduce-in-javascript-guide\/\"><span class=\"title-span\">Mastering reduce in JavaScript : Ultimate 2025 2025 Guide to Transform Confusion into Clarity<\/span><\/a><\/p>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"Event Delegation and Event Bubbling in\u00a0JavaScript works on an event-driven programming model, meaning most interactions in a web&hellip;","protected":false},"author":8,"featured_media":22667,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_singular_sidebar":"","csco_page_header_type":"","csco_page_load_nextpost":"","footnotes":""},"categories":[3383,3203],"tags":[12014,11371,12009,12011,12012,12010,12013,12015],"class_list":["post-22661","post","type-post","status-publish","format-standard","has-post-thumbnail","category-java-script","category-programming","tag-event-bubbling-in-javascript","tag-event-capturing","tag-event-delegation-and-event-bubbling-in-javascript","tag-event-delegation-and-event-bubbling-in-javascript-example","tag-event-delegation-and-event-bubbling-in-javascript-github","tag-event-delegation-and-event-bubbling-in-javascript-interview-questions","tag-event-delegation-in-javascript","tag-event-delegation-vs-event-bubbling","cs-entry"],"_links":{"self":[{"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/posts\/22661","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/comments?post=22661"}],"version-history":[{"count":0,"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/posts\/22661\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/media\/22667"}],"wp:attachment":[{"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/media?parent=22661"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/categories?post=22661"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/tags?post=22661"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}