를 통해 버블링되고 마지막으로 최대 도달 이 <버튼> 에서 도달 이벤트 버블링 .
이벤트 위임은 어떻게 작동하나요?
이벤트 위임을 사용하여 상위 요소에 이벤트 리스너를 연결하고 이벤트 버블링을 통해 하위 요소의 이벤트를 처리할 수도 있습니다.
예를 들어:
단순 목록의 클릭 이벤트 처리
많은 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-এর ইভেন্টগুলোকে হ্যান্ডল করার মাধ্যমে ডাইনামিক কনটেন্ট ম্যানেজমেন্টকেও সহজ করে তোলে।
위 내용은 JavaScript 이벤트 위임에 대한 자세한 토론의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
