jQuery .on() での直接イベント処理と委任されたイベント処理: どちらのアプローチを選択する必要がありますか?

jQuery .on() での直接イベント処理と委任されたイベント処理

jQuery の .on() メソッドは、次の 2 つの異なるイベント処理アプローチを提供します。そして委任されました。違いは、イベント処理の範囲にあります。

直接イベント処理

直接イベント処理では、イベント ハンドラーはターゲット要素に直接バインドされます。これは、ハンドラーは、イベントがその要素で直接発生した場合にのみ実行され、その子孫では実行されないことを意味します。例:

$("div#target span.green").on("click", function() {
   alert($(this).attr("class") + " is clicked");
});

委任されたイベント処理

委任されたイベント処理では、イベント ハンドラーは祖先要素にバインドされ、セレクターは子孫要素を指定します。ハンドラーをトリガーする必要があります。これにより、ハンドラーは、指定されたスコープ内の任意の場所で発生するイベントを処理できるようになります。例:

$("div#target").on("click", "span.green", function() {
   alert($(this).attr("class") + " is clicked");
});

主な違いは、ケース 1 では、各スパンが独自のイベントの処理を直接担当することです。ケース 2 では、コンテナ要素 (div#target) に、その子要素 ​​(span.green) のイベントを処理する責任が委任されます。

比較例

提供されている例は、div#target 内の緑色のスパンをクリックするコンテキストでの直接イベント処理と委任されたイベント処理の違いを示しています。どちらのメソッドも、クリックされたスパンのクラスに警告するという同じ動作を実現します。

直接アプローチ:

• 各緑色のスパンは、独自のクリック イベント ハンドラーにバインドされます。
• div#target 内で作成された新しい緑色のスパンには、バインドされたイベント ハンドラーがありません。

委任されたアプローチ:

• イベント ハンドラーは、span.green を委任されたセレクターとして、div#target にバインドされます。
>
• div#target 内の既存または将来の緑色のスパンをクリックすると、
• div#target は、span.green.

に一致するすべての子要素に代わってイベントを処理する責任があります。

以上がjQuery .on() での直接イベント処理と委任されたイベント処理: どちらのアプローチを選択する必要がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。