Discussion détaillée sur la délégation d'événements JavaScript-js tutoriel-php.cn

JavaScript Event Delegation সম্পর্কে বিস্তারিত আলোচনা

Qu’est-ce que la délégation d’événements ?

La délégation d'événements est une technique avancée qui rend la gestion des événements DOM en JavaScript plus efficace et plus simple. Habituellement, lorsque nous attachons un gestionnaire d'événements, il est directement associé à un élément DOM spécifique. Mais lorsqu'il existe de nombreux éléments enfants, attacher un gestionnaire d'événements distinct pour chacun est inutile et peu efficace en termes de mémoire. C'est là que la délégation événementielle s'avère utile.

La délégation d'événements fonctionne essentiellement sur la base du mécanisme "Event Bubbling". Grâce à ce mécanisme, l'événement se propage vers le haut depuis sa cible prévue (vers les éléments parents) jusqu'à ce qu'il atteigne le document.

Qu’est-ce que le bouillonnement d’événements ?

Le bouillonnement d'événement est un processus dans lequel un événement part de son élément cible le plus interne et atteint progressivement ses éléments parents. Supposons que vous cliquiez sur un qui se trouve à l'intérieur d'un

, et que

Encore une fois un La balise contient L'événement click est déclenché d'abord sur le , puis sur le

et enfin sur le atteindre jusqu'à Ce de Atteindre l'événement bouillonnant.

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>

Copier après la connexion

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>

Copier après la connexion

এখানে, আমরা একটি নতুন 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>

Copier après la connexion

এই কোডে, প্রত্যেকটি 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!

source：dev.to

Article précédent：Maîtriser la délégation d'événements JavaScript Article suivant：Introduction à WebRTC

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur