上冒泡，最后在 上触发。高达这个<按钮>来自<正文>达到事件冒泡。
事件委托如何工作？
使用事件委托，我们将事件监听器附加到父元素，并且还可以通过事件冒泡处理来自子元素的事件。
例如：
处理简单列表上的点击事件
假设，我有一个包含许多 li 项目的列表。单击每个 li 项目将显示一条消息。
htmlCopy code
<ul id="my-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const myList = document.getElementById('my-list');
// ইভেন্ট ডেলিগেশন ব্যবহার করে parent <ul> element-এ ইভেন্ট লিসেনার যোগ করা হলো
myList.addEventListener('click', (e)=> {
e.preventDefault();
// নিশ্চিত করা হচ্ছে যে ক্লিকটি <li> element এ হয়েছে
if (event.target.tagName === 'LI') {
alert('You clicked on ' + event.target.textContent);
}
});
</script>
登录后复制
在此代码中，事件侦听器仅添加到 ul 元素。每当点击 li 元素时，事件就会在 ul 中冒泡，我们可以从 event.target 知道点击发生在哪个 li 元素上。
ইভেন্ট ডেলিগেশন কেন প্রয়োজন?
-
কোড সহজ ও সংক্ষিপ্ত করা: যদি অনেক চাইল্ড এলিমেন্টের উপর ইভেন্ট হ্যান্ডলার যোগ করতে হয়, তবে ইভেন্ট ডেলিগেশন ব্যবহার করলে শুধুমাত্র একটি ইভেন্ট হ্যান্ডলার দিয়েই সবগুলো এলিমেন্টের ইভেন্ট পরিচালনা করা সম্ভব।
-
পারফরম্যান্স বৃদ্ধি: প্রচুর সংখ্যক ইলিমেন্টের ইভেন্ট হ্যান্ডলার অ্যাসাইন করা ব্রাউজারকে ধীর করে দিতে পারে। কিন্তু ইভেন্ট ডেলিগেশন ব্যবহার করলে একটি ইভেন্ট হ্যান্ডলার পুরো প্যারেন্ট এলিমেন্টকে পরিচালনা করতে পারে, যা ব্রাউজারের কাজ সহজ করে।
-
ডাইনামিক কন্টেন্ট হ্যান্ডলিং: যখন নতুন এলিমেন্ট ডাইনামিকভাবে অ্যাড করা হয়, তখন আলাদাভাবে ইভেন্ট হ্যান্ডলার অ্যাসাইন করতে হয় না। ইভেন্ট ডেলিগেশন ব্যবহার করলে প্যারেন্ট এলিমেন্টের ইভেন্ট হ্যান্ডলার এমন নতুন এলিমেন্টগুলোর ইভেন্টও হ্যান্ডল করতে পারে।
ধরা যাক, উপরের উদাহরণে আমরা DOM-এ নতুন li item যোগ করব এবং তাদের ক্লিক ইভেন্ট হ্যান্ডল করব।
htmlCopy code
<button id="add-item">Add Item</button>
<ul id="my-list">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<script>
const myList = document.getElementById('my-list');
const addItemButton = document.getElementById('add-item');
let itemCount = 2;
addItemButton.addEventListener('click', (e)=>{
e.preventDefault();
itemCount++;
const newItem = document.createElement('li');
newItem.textContent = 'Item ' + itemCount;
myList.appendChild(newItem);
});
myList.addEventListener('click', function(event) {
if (event.target.tagName === 'LI') {
alert('You clicked on ' + event.target.textContent);
}
});
</script>
登录后复制
এখানে, আমরা একটি নতুন li item যোগ করার জন্য একটি বাটন যুক্ত করেছি। যখনই একটি নতুন item যোগ করা হবে, সেই item-এ ক্লিক করলে ul element-এ অ্যাটাচ করা ইভেন্ট লিসেনার তার ক্লিক ইভেন্টটি হ্যান্ডল করবে, এবং একটি মেসেজ দেখাবে।
ইভেন্ট ডেলিগেশন ছাড়া একই কাজ করা হলে কী সমস্যা হতো?
htmlCopy code
<ul id="my-list">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<script>
// প্রত্যেকটি <li> element এ আলাদাভাবে ইভেন্ট লিসেনার যোগ করা হচ্ছে
const items = document.querySelectorAll('#my-list li');
items.forEach(function(item) {
item.addEventListener('click', function() {
alert('You clicked on ' + item.textContent);
});
});
</script>
登录后复制
এই কোডে, প্রত্যেকটি li item-এ আলাদাভাবে ইভেন্ট লিসেনার যোগ করা হচ্ছে। কিন্তু এই পদ্ধতি বেশি মেমোরি ব্যবহার করে এবং যদি নতুন li item যোগ করা হয়, তখন সেই item-এ আলাদাভাবে ইভেন্ট লিসেনার অ্যাটাচ করতে হবে। ইভেন্ট ডেলিগেশন এই সমস্যাগুলো দূর করতে পারে।
উপসংহার
ইভেন্ট ডেলিগেশন একটি শক্তিশালী এবং কার্যকর টেকনিক যা আপনাকে জাভাস্ক্রিপ্টে DOM ইভেন্ট ম্যানেজমেন্টের ক্ষেত্রে সহজ, পরিষ্কার, এবং মেমোরি সাশ্রয়ী কোড লিখতে সাহায্য করে। এটি parent elements-এর ইভেন্ট লিসেনার ব্যবহার করে child elements-এর ইভেন্টগুলোকে হ্যান্ডল করার মাধ্যমে ডাইনামিক কনটেন্ট ম্যানেজমেন্টকেও সহজ করে তোলে।
