あなたと同じように JavaScript でイベント委任を学びましょう 5

各子に個別のリスナーを追加する代わりに、単一のイベント リスナーを親要素にアタッチすることは、イベント委任として知られる手法です。これは、イベント (クリックなど) が DOM ツリーを子から親に移動する イベント バブリング によって機能します。親レベルでイベントを処理することで、特に多数の子要素や動的に追加される要素を処理する場合に、メモリを節約し、パフォーマンスを向上させることができます。

仕組みは?

子要素でイベント (クリックなど) がトリガーされると、そこでは停止しません。イベントはその親までバブルアップし、ドキュメント ルートに到達するまで DOM ツリーを上っていきます。イベント委任は、ターゲットのすべての子要素の共通の祖先にイベント リスナーを配置することでこれを利用します。この祖先は、子要素から発生するイベントをリッスンし、イベントの種類やイベントをトリガーした特定の子要素などの特定の条件に基づいてそれらを処理します。

イベント委任の例

ボタンのリストがあり、各ボタンのクリック イベントを処理したいとします。各ボタンにクリック イベント リスナーを追加する代わりに、単一のリスナーを親要素に追加できます。

<ul id="buttonList">
  <li><button data-action="delete">Delete</button></li>
  <li><button data-action="edit">Edit</button></li>
  <li><button data-action="view">View</button></li>
</ul>

ここで、クリック イベント リスナーを各ボタンに追加する代わりに、単一のリスナーを親

にアタッチします。要素。

document.getElementById("buttonList").addEventListener("click", function(event) {
  if (event.target.tagName === "BUTTON") {
    const action = event.target.getAttribute("data-action");

    if (action === "delete") {
      console.log("Deleting item...");
    } else if (action === "edit") {
      console.log("Editing item...");
    } else if (action === "view") {
      console.log("Viewing item...");
    }
  }
});

クリック イベント リスナーは

にアタッチされます。要素 (親)。イベント ハンドラー内で、event.target.tagName === "BUTTON" を使用して、クリックされた要素がボタンであるかどうかを確認します。これにより、ボタンのクリックのみに応答するようになります。 data-action 属性を使用して、実行するアクション (削除、編集、または表示) を決定します。このアプローチは、特に多くのボタンがある場合、または新しいボタンを動的に追加する場合に、より効率的でスケーラブルです。

動的要素を使用した別の例

ボタンのリストが動的に生成された場合 (JavaScript 経由で新しいボタンを追加するなど)、イベント リスナーを再アタッチしなくても、イベント委任は引き続き完全に機能します。


const ul = document.getElementById("buttonList");

// Dynamically adding new buttons
const newButton = document.createElement("li");
newButton.innerHTML = '<button data-action="share">Share</button>';
ul.appendChild(newButton);

// The same event listener on the parent will handle the new button
ul.addEventListener("click", function(event) {
  if (event.target.tagName === "BUTTON") {
    const action = event.target.getAttribute("data-action");
    console.log(action + " button clicked.");
  }
});

ログイン後にコピー

イベント バブリング: イベントの委任は、子要素でトリガーされたイベントがその祖先まで伝播するイベント バブリングによって機能します。

動的コンテンツに対して効率的: イベント リスナーを親にアタッチするため、後で DOM に追加される要素に対して機能します。

パフォーマンス: 特に多数の子要素の場合、複数のイベント リスナーのアタッチと管理のオーバーヘッドを削減します。

イベント委任は、特に多くの要素や動的コンテンツを扱う場合、効率的な DOM イベント処理に不可欠な手法です。

以上があなたと同じように JavaScript でイベント委任を学びましょう 5の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。