জাভাস্ক্রিপ্টে ইউনিভার্সাল ইভেন্ট ডেলিগেশন

পূর্ববর্তী পাঠে দেওয়া কোড কাজ করে, যাইহোক, এটি ত্রুটিমুক্ত নয়। আসুন এই ত্রুটিগুলি বিশ্লেষণ করি এবং একটি আরও সর্বজনীন সমাধান লিখি।

আমাদের কোডের ত্রুটি সেই ক্ষেত্রে প্রকাশ পাবে, যখন li-এর ভিতরে কোনো নেস্টেড ট্যাগ থাকে। আমাদের ক্ষেত্রে এগুলি হতে পারে i ট্যাগ:

html<ul>
  <li>item <i>italic</i> item</li>
  <li>item <i>italic</i> item</li>
  <li>item <i>italic</i> item</li>
  <li>item <i>italic</i> item</li>
  <li>item <i>italic</i> item</li>
</ul>

এই ক্ষেত্রে, i ট্যাগে ক্লিক করলে i ট্যাগের শেষে বিস্ময়বোধক চিহ্ন যোগ হবে, এবং li ট্যাগে নয়, যেমন আমরা চাইতাম - কারণ event.target-এ সেই ট্যাগটি পড়ে যেখানে ইভেন্টটি ঘটেছে।

সমস্যাটি closest পদ্ধতি ব্যবহার করে সমাধান করা যেতে পারে:

javascriptlist.addEventListener('click', function(event) {
  let li = event.target.closest('li');
  
  if (li) {
    li.innerHTML = li.innerHTML + '!';
  }
});