jQuery での直接イベント処理と委任されたイベント処理: いつどちらを使用する必要がありますか?

jQuery .on() による直接イベント処理と委任されたイベント処理

イベント処理に jQuery .on() メソッドを利用する場合、これは、直接イベント ハンドラーと委任されたイベント ハンドラーの基本的な違いです。

直接イベント ハンドラー。名前を付けて、イベント リスナーを特定の要素に直接アタッチします。例:

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

このシナリオでは、クリック イベント リスナーは div#target コンテナ内の各 span.green 要素に直接バインドされます。一方、

委任されたイベント ハンドラーは、 、イベント リスナーを親要素にアタッチし、イベントの処理をセレクターに一致する子孫要素に委任します。例:

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

ここでは、クリック イベント リスナーが div#target コンテナにアタッチされ、クリックの処理が子孫のspan.green 要素に委任されます。

キー違いは、委任されたイベント処理では、イベントが親要素で直接発生した場合、ハンドラーは呼び出されないことです。代わりに、イベントによって DOM ツリーがバブルアップされ、指定されたセレクターに一致する子孫要素に対してのみハンドラーが呼び出されます。これは、イベント リスナーが明示的なバインドを必要とせずに、一致する子孫に自動的に適用されるため、新しい要素が追加または削除される可能性がある動的コンテンツにとって有益です。

提供された例では、直接イベントと委任イベントの両方が適用されます。動的要素が追加または削除されないため、ハンドラーは同じ動作になります。ただし、新しいspan.green要素がページに動的に追加された場合、委任されたイベントハンドラーのみがそのクリックイベントを処理します。

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