Detailed discussion about JavaScript Event Delegation

What is Event Delegation?

Event delegation is an advanced technique that makes DOM event handling in JavaScript more efficient and simpler. Normally, when we attach an event handler, it is directly attached to a specific DOM element. But when there are many child elements, attaching a separate event handler for each is unnecessary and not memory efficient. This is where event delegation comes in handy.

Event delegation basically works based on the "Event Bubbling" mechanism. Through this mechanism the event propagates upwards from its intended target (to parent elements) until it reaches the document.

What is Event Bubbling?

Event bubbling is a process where an event starts from its innermost target element and progressively reaches its parent elements. Suppose, you click athat is inside a

, and that

Again aThe tag contains The click event is triggered first on the

, then bubbling through the

, and finally on thereach up to This

fromReaching Event Bubbling .

How does event delegation work?

Using event delegation, we attach an event listener to the parent element and can also handle events from child elements via event bubbling.

For example:

Handling click events on a simple list

Suppose, I have a list containing many li items. Clicking on each li item will display a message.

htmlCopy code 
 
Item 1
 
Item 2
 
Item 3
 
 

Copy after login

In this code, an event listener is added only to the ul element. Whenever an li element is clicked, the event will bubble up in ul, and we will know from event.target that the click happened on which li element.

ইভেন্ট ডেলিগেশন কেন প্রয়োজন?

• কোড সহজ ও সংক্ষিপ্ত করা:যদি অনেক চাইল্ড এলিমেন্টের উপর ইভেন্ট হ্যান্ডলার যোগ করতে হয়, তবে ইভেন্ট ডেলিগেশন ব্যবহার করলে শুধুমাত্র একটি ইভেন্ট হ্যান্ডলার দিয়েই সবগুলো এলিমেন্টের ইভেন্ট পরিচালনা করা সম্ভব।
• পারফরম্যান্স বৃদ্ধি:প্রচুর সংখ্যক ইলিমেন্টের ইভেন্ট হ্যান্ডলার অ্যাসাইন করা ব্রাউজারকে ধীর করে দিতে পারে। কিন্তু ইভেন্ট ডেলিগেশন ব্যবহার করলে একটি ইভেন্ট হ্যান্ডলার পুরো প্যারেন্ট এলিমেন্টকে পরিচালনা করতে পারে, যা ব্রাউজারের কাজ সহজ করে।
• ডাইনামিক কন্টেন্ট হ্যান্ডলিং:যখন নতুন এলিমেন্ট ডাইনামিকভাবে অ্যাড করা হয়, তখন আলাদাভাবে ইভেন্ট হ্যান্ডলার অ্যাসাইন করতে হয় না। ইভেন্ট ডেলিগেশন ব্যবহার করলে প্যারেন্ট এলিমেন্টের ইভেন্ট হ্যান্ডলার এমন নতুন এলিমেন্টগুলোর ইভেন্টও হ্যান্ডল করতে পারে।

ধরা যাক, উপরের উদাহরণে আমরা DOM-এ নতুন li item যোগ করব এবং তাদের ক্লিক ইভেন্ট হ্যান্ডল করব।

htmlCopy code 

Add Item

• Item 1
• Item 2