ホームページ ウェブフロントエンド jsチュートリアル JavaScript イベント委任に関する詳細な説明

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 までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

JavaScriptの文字列文字を交換します JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScriptの文字列文字を交換します

jQuery日付が有効かどうかを確認します jQuery日付が有効かどうかを確認します Mar 01, 2025 am 08:51 AM

jQuery日付が有効かどうかを確認します

jQueryは要素のパディング/マージンを取得します jQueryは要素のパディング/マージンを取得します Mar 01, 2025 am 08:53 AM

jQueryは要素のパディング/マージンを取得します

10 jQuery Accordionsタブ 10 jQuery Accordionsタブ Mar 01, 2025 am 01:34 AM

10 jQuery Accordionsタブ

10 jqueryプラグインをチェックする価値があります 10 jqueryプラグインをチェックする価値があります Mar 01, 2025 am 01:29 AM

10 jqueryプラグインをチェックする価値があります

ノードとHTTPコンソールを使用したHTTPデバッグ ノードとHTTPコンソールを使用したHTTPデバッグ Mar 01, 2025 am 01:37 AM

ノードとHTTPコンソールを使用したHTTPデバッグ

jQueryはscrollbarをdivに追加します jQueryはscrollbarをdivに追加します Mar 01, 2025 am 01:30 AM

jQueryはscrollbarをdivに追加します

カスタムGoogle検索APIセットアップチュートリアル カスタムGoogle検索APIセットアップチュートリアル Mar 04, 2025 am 01:06 AM

カスタムGoogle検索APIセットアップチュートリアル

See all articles