ホームページ > 記事 > ウェブフロントエンド > あなたと同じように 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..."); } } });
クリック イベント リスナーは
ボタンのリストが動的に生成された場合 (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 サイトの他の関連記事を参照してください。