JavaScript でのイベント委任をマスターする: イベント処理を簡素化する

JavaScript でのイベント委任

イベント委任 は、単一のイベント リスナーを使用して複数の子要素のイベントを処理する JavaScript の手法です。このアプローチでは、イベント バブリングを利用して、動的に作成された要素または複数の同様の要素を処理する際のパフォーマンスを向上させ、コードを簡素化します。

---

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

イベント リスナーを個々の子要素にアタッチする代わりに、単一のリスナーを親要素にアタッチします。このリスナーは、その子から湧き出るイベントをキャッチします。

仕組み:

1. 親要素にイベント リスナーを追加します。
2. event.target プロパティを使用して、どの子要素がイベントをトリガーしたかを特定します。

---

2.イベント委任の利点

• パフォーマンスの向上: DOM 内のイベント リスナーの数を減らします。
• 動的要素: ページの読み込み後に動的に作成された要素のイベントを簡単に処理します。
• よりシンプルなコード: イベント処理ロジックを一元化します。

---

3.イベント委任の例

HTML 構造

<ul>



<h4>
  
  
  <strong>JavaScript</strong>
</h4>



<pre class="brush:php;toolbar:false">const menu = document.getElementById("menu");

menu.addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    console.log("Clicked item:", event.target.textContent);
  }
});

• クリック イベントは li 要素から ul までバブルアップします。
• if ステートメントにより、li クリックのみが処理されることが保証されます。

---

4.動的要素の処理

イベント委任は、動的に追加された要素のイベントを管理するのに最適です。

例:

const menu = document.getElementById("menu");

// Adding a new item dynamically
const newItem = document.createElement("li");
newItem.textContent = "Blog";
menu.appendChild(newItem);

// No need to add a new event listener
menu.addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    console.log("Clicked item:", event.target.textContent);
  }
});

---

5.望ましくない動作の防止

stopPropagation() または特定の条件を使用して、イベント処理を制限します。

例:

<ul>



<h4>
  
  
  <strong>JavaScript</strong>
</h4>



<pre class="brush:php;toolbar:false">const menu = document.getElementById("menu");

menu.addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    console.log("Clicked item:", event.target.textContent);
  }
});

---

6.実用的な応用

A.インタラクティブなテーブル

const menu = document.getElementById("menu");

// Adding a new item dynamically
const newItem = document.createElement("li");
newItem.textContent = "Blog";
menu.appendChild(newItem);

// No need to add a new event listener
menu.addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    console.log("Clicked item:", event.target.textContent);
  }
});

B.フォームの検証

menu.addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    console.log("Clicked item:", event.target.textContent);
  } else {
    event.stopPropagation(); // Stop propagation for non-LI elements
  }
});

C.動的 UI 要素

<table>





<pre class="brush:php;toolbar:false">const table = document.getElementById("dataTable");

table.addEventListener("click", function(event) {
  if (event.target.tagName === "TD") {
    console.log("Clicked cell:", event.target.textContent);
  }
});

---

7.イベント委任に関する注意事項

1. 伝播の問題: stopPropagation() はバブリングを防ぐ可能性があるため、注意してください。
2. パフォーマンス オーバーヘッド: 必要な場合にのみ委任します。必要な場合を除き、単一のリスナーをドキュメント全体に添付することは避けてください。
3. イベント ターゲティング:event.target と条件を使用して正確なターゲティングを確保します。

---

8.概要

• イベント委任は、単一のリスナーを使用して複数の要素のイベントを管理する効率的な方法です。
• イベントのバブリングに依存しており、動的に追加された要素を処理する場合に特に便利です。
• イベントをトリガーした特定の要素を識別するには、常にevent.targetを使用します。

イベント委任をマスターすることで、対話型 Web アプリケーション用のよりクリーンで効率的な JavaScript コードを作成できます。

こんにちは、アバイ・シン・カタヤットです!
私はフロントエンドとバックエンドの両方のテクノロジーの専門知識を持つフルスタック開発者です。私はさまざまなプログラミング言語やフレームワークを使用して、効率的でスケーラブルでユーザーフレンドリーなアプリケーションを構築しています。
ビジネス用メールアドレス kaashshorts28@gmail.com までお気軽にご連絡ください。

以上がJavaScript でのイベント委任をマスターする: イベント処理を簡素化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。