Discussion détaillée sur la délégation d'événements JavaScript

Comment fonctionne la délégation événementielle ?

En utilisant la délégation d'événements, nous attachons un écouteur d'événement à l'élément parent et pouvons également gérer les événements des éléments enfants via le bouillonnement d'événements.

Par exemple:

Gestion des événements de clic sur une liste simple

Supposons que j'ai une liste contenant de nombreux éléments li. Cliquer sur chaque élément li affichera un message.

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>

Dans ce code, un écouteur d'événement est ajouté uniquement à l'élément ul. Chaque fois que l'on clique sur un élément li, l'événement apparaîtra dans ul, et nous saurons grâce à event.target que le clic s'est produit sur quel élément 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-এর ইভেন্টগুলোকে হ্যান্ডল করার মাধ্যমে ডাইনামিক কনটেন্ট ম্যানেজমেন্টকেও সহজ করে তোলে।

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!