JavaScript イベント委任に関する詳細な説明-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScript イベント委任に関する詳細な説明

Sep 04, 2024 am 07:00 AM

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

イベント委任とは何ですか?

イベント委任は、JavaScript での DOM イベント処理をより効率的かつ簡単にする高度な技術です。通常、イベントハンドラーをアタッチすると、特定の DOM 要素に直接関連付けられます。ただし、子要素が多数ある場合、それぞれに個別のイベントハンドラーをアタッチする必要はなく、メモリ効率も悪くなります。ここでイベント委任が役に立ちます。

イベントの委任は基本的に「イベントバブリング」メカニズムに基づいて機能します。このメカニズムを通じて、イベントはドキュメントに到達するまで、意図されたターゲット (親要素) から上向きに伝播します。

イベントバブリングとは何ですか?

イベントバブリングは、イベントが最も内側のターゲット要素から開始され、徐々に親要素に到達するプロセスです。 <div> 内の <button> をクリックすると、その <div> が表示されるとします。再び

です。タグには次の内容が含まれますクリックイベントは、最初に <button> でトリガーされ、次に <div> でバブリングし、最後に <body> でトリガーされます。までに達するこの<ボタン> からイベントバブリングに到達しました。

イベントの委任はどのように機能しますか?

イベント委任を使用して、イベントリスナーを親要素にアタッチし、イベントバブリングを介して子要素からのイベントを処理することもできます。

例えば：

単純なリストのクリックイベントの処理

多くの li 項目を含むリストがあるとします。各項目をクリックするとメッセージが表示されます。

htmlCopy code
&lt;ul id="my-list"&gt;
  &lt;li&gt;Item 1&lt;/li&gt;
  &lt;li&gt;Item 2&lt;/li&gt;
  &lt;li&gt;Item 3&lt;/li&gt;
&lt;/ul&gt;

&lt;script&gt;
  const myList = document.getElementById('my-list');

  // ইভেন্ট ডেলিগেশন ব্যবহার করে parent &lt;ul&gt; element-এ ইভেন্ট লিসেনার যোগ করা হলো
  myList.addEventListener('click', (e)=&gt; {
    e.preventDefault();
    // নিশ্চিত করা হচ্ছে যে ক্লিকটি &lt;li&gt; element এ হয়েছে
    if (event.target.tagName === 'LI') {
      alert('You clicked on ' + event.target.textContent);
    }
  });
&lt;/script&gt;

ログイン後にコピー

このコードでは、ul 要素にのみイベントリスナーが追加されています。 li 要素がクリックされるたびに、イベントが ul でバブルアップされ、event.target からどの li 要素でクリックが発生したかがわかります。

ইভেন্ট ডেলিগেশন কেন প্রয়োজন?

কোড সহজ ও সংক্ষিপ্ত করা: যদি অনেক চাইল্ড এলিমেন্টের উপর ইভেন্ট হ্যান্ডলার যোগ করতে হয়, তবে ইভেন্ট ডেলিগেশন ব্যবহার করলে শুধুমাত্র একটি ইভেন্ট হ্যান্ডলার দিয়েই সবগুলো এলিমেন্টের ইভেন্ট পরিচালনা করা সম্ভব।
পারফরম্যান্স বৃদ্ধি: প্রচুর সংখ্যক ইলিমেন্টের ইভেন্ট হ্যান্ডলার অ্যাসাইন করা ব্রাউজারকে ধীর করে দিতে পারে। কিন্তু ইভেন্ট ডেলিগেশন ব্যবহার করলে একটি ইভেন্ট হ্যান্ডলার পুরো প্যারেন্ট এলিমেন্টকে পরিচালনা করতে পারে, যা ব্রাউজারের কাজ সহজ করে।
ডাইনামিক কন্টেন্ট হ্যান্ডলিং: যখন নতুন এলিমেন্ট ডাইনামিকভাবে অ্যাড করা হয়, তখন আলাদাভাবে ইভেন্ট হ্যান্ডলার অ্যাসাইন করতে হয় না। ইভেন্ট ডেলিগেশন ব্যবহার করলে প্যারেন্ট এলিমেন্টের ইভেন্ট হ্যান্ডলার এমন নতুন এলিমেন্টগুলোর ইভেন্টও হ্যান্ডল করতে পারে।

ধরা যাক, উপরের উদাহরণে আমরা DOM-এ নতুন li item যোগ করব এবং তাদের ক্লিক ইভেন্ট হ্যান্ডল করব।

htmlCopy code
&lt;button id="add-item"&gt;Add Item&lt;/button&gt;
&lt;ul id="my-list"&gt;
  &lt;li&gt;Item 1&lt;/li&gt;
  &lt;li&gt;Item 2&lt;/li&gt;
&lt;/ul&gt;

&lt;script&gt;
  const myList = document.getElementById('my-list');
  const addItemButton = document.getElementById('add-item');

  let itemCount = 2;

  addItemButton.addEventListener('click', (e)=&gt;{
    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);
    }
  });
&lt;/script&gt;

ログイン後にコピー

এখানে, আমরা একটি নতুন li item যোগ করার জন্য একটি বাটন যুক্ত করেছি। যখনই একটি নতুন item যোগ করা হবে, সেই item-এ ক্লিক করলে ul element-এ অ্যাটাচ করা ইভেন্ট লিসেনার তার ক্লিক ইভেন্টটি হ্যান্ডল করবে, এবং একটি মেসেজ দেখাবে।

ইভেন্ট ডেলিগেশন ছাড়া একই কাজ করা হলে কী সমস্যা হতো?

htmlCopy code
&lt;ul id="my-list"&gt;
  &lt;li&gt;Item 1&lt;/li&gt;
  &lt;li&gt;Item 2&lt;/li&gt;
&lt;/ul&gt;

&lt;script&gt;
  // প্রত্যেকটি &lt;li&gt; element এ আলাদাভাবে ইভেন্ট লিসেনার যোগ করা হচ্ছে
  const items = document.querySelectorAll('#my-list li');
  items.forEach(function(item) {
    item.addEventListener('click', function() {
      alert('You clicked on ' + item.textContent);
    });
  });
&lt;/script&gt;

ログイン後にコピー

এই কোডে, প্রত্যেকটি li item-এ আলাদাভাবে ইভেন্ট লিসেনার যোগ করা হচ্ছে। কিন্তু এই পদ্ধতি বেশি মেমোরি ব্যবহার করে এবং যদি নতুন li item যোগ করা হয়, তখন সেই item-এ আলাদাভাবে ইভেন্ট লিসেনার অ্যাটাচ করতে হবে। ইভেন্ট ডেলিগেশন এই সমস্যাগুলো দূর করতে পারে।

উপসংহার

ইভেন্ট ডেলিগেশন একটি শক্তিশালী এবং কার্যকর টেকনিক যা আপনাকে জাভাস্ক্রিপ্টে DOM ইভেন্ট ম্যানেজমেন্টের ক্ষেত্রে সহজ, পরিষ্কার, এবং মেমোরি সাশ্রয়ী কোড লিখতে সাহায্য করে। এটি parent elements-এর ইভেন্ট লিসেনার ব্যবহার করে child elements-এর ইভেন্টগুলোকে হ্যান্ডল করার মাধ্যমে ডাইনামিক কনটেন্ট ম্যানেজমেন্টকেও সহজ করে তোলে।

以上がJavaScript イベント委任に関する詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。