From 27f8ef53a16dbbcd1ec541081fd7dbee9796aad1 Mon Sep 17 00:00:00 2001
From: byt3h3ad <adhirajd007@gmail.com>
Date: Fri, 9 Feb 2024 12:02:37 +0530
Subject: [PATCH] new file: javascript/event-delegation.md

---
 javascript/event-delegation.md | 50 ++++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 javascript/event-delegation.md

diff --git a/javascript/event-delegation.md b/javascript/event-delegation.md
new file mode 100644
index 0000000..585a95d
--- /dev/null
+++ b/javascript/event-delegation.md
@@ -0,0 +1,50 @@
+# Event Delegation in JavaScript
+
+How can we improve the performance of this code?
+
+```html
+<ul>
+  <li>Item 1</li>
+  <li>Item 2</li>
+  <li>Item 3</li>
+  <li>Item 4</li>
+  <!-- ... this is a really long list -->
+</ul>
+
+<script>
+let listItems = document.querySelectorAll('li');
+
+listItems.forEach(function(item, i) {
+  item.addEventListener('click', () => {
+    item.style.backgroundColor = 'lightblue';
+  });
+});
+</script>
+```
+
+Instead of adding an event listener to _each_ list element, we can use “event delegation” to add a single event listener to the parent element `(ul)` and check if the event target is a list item. This has a few advantages:
+
+_Memory Efficiency:_ Event delegation conserves memory by reducing the number of event listeners, since one parent listener replaces multiple child listeners.
+
+_Handling Dynamic Element:_ Event delegation smoothly manages dynamically added or removed elements, as the parent listener remains consistent, without needing to re-bind.
+
+```html
+<ul>
+  <li>Item 1</li>
+  <li>Item 2</li>
+  <li>Item 3</li>
+  <li>Item 4</li>
+  <!-- ... this is a really long list -->
+</ul>
+
+<script>
+  let ul = document.querySelector('ul');
+  ul.addEventListener('click', (event) => {
+    if(event.target.tagName === 'LI') {
+      event.target.style.backgroundColor = 'lightblue';
+    }
+  });
+</script>
+```
+
+[source](https://bytes.dev/archives/189)