von Erreichen des sprudelnden Ereignisses.
Wie funktioniert die Delegation einer Veranstaltung?
Mithilfe der Ereignisdelegation fügen wir einen Ereignis-Listener an das übergeordnete Element an und können auch Ereignisse von untergeordneten Elementen über Ereignis-Bubbling verarbeiten.
Zum Beispiel:
Klickereignisse in einer einfachen Liste verarbeiten
Angenommen, ich habe eine Liste mit vielen Li-Artikeln. Wenn Sie auf jedes Li-Element klicken, wird eine Meldung angezeigt.
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>
In diesem Code wird ein Ereignis-Listener nur dem ul-Element hinzugefügt. Immer wenn auf ein li-Element geklickt wird, wird das Ereignis in ul angezeigt, und aus event.target wissen wir, dass der Klick auf welchem li-Element stattgefunden hat.
ইভেন্ট ডেলিগেশন কেন প্রয়োজন?
-
কোড সহজ ও সংক্ষিপ্ত করা: যদি অনেক চাইল্ড এলিমেন্টের উপর ইভেন্ট হ্যান্ডলার যোগ করতে হয়, তবে ইভেন্ট ডেলিগেশন ব্যবহার করলে শুধুমাত্র একটি ইভেন্ট হ্যান্ডলার দিয়েই সবগুলো এলিমেন্টের ইভেন্ট পরিচালনা করা সম্ভব।
-
পারফরম্যান্স বৃদ্ধি: প্রচুর সংখ্যক ইলিমেন্টের ইভেন্ট হ্যান্ডলার অ্যাসাইন করা ব্রাউজারকে ধীর করে দিতে পারে। কিন্তু ইভেন্ট ডেলিগেশন ব্যবহার করলে একটি ইভেন্ট হ্যান্ডলার পুরো প্যারেন্ট এলিমেন্টকে পরিচালনা করতে পারে, যা ব্রাউজারের কাজ সহজ করে।
-
ডাইনামিক কন্টেন্ট হ্যান্ডলিং: যখন নতুন এলিমেন্ট ডাইনামিকভাবে অ্যাড করা হয়, তখন আলাদাভাবে ইভেন্ট হ্যান্ডলার অ্যাসাইন করতে হয় না। ইভেন্ট ডেলিগেশন ব্যবহার করলে প্যারেন্ট এলিমেন্টের ইভেন্ট হ্যান্ডলার এমন নতুন এলিমেন্টগুলোর ইভেন্টও হ্যান্ডল করতে পারে।
ধরা যাক, উপরের উদাহরণে আমরা 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-এর ইভেন্টগুলোকে হ্যান্ডল করার মাধ্যমে ডাইনামিক কনটেন্ট ম্যানেজমেন্টকেও সহজ করে তোলে।
Das obige ist der detaillierte Inhalt vonAusführliche Diskussion über die JavaScript-Ereignisdelegierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
