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

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

jQuery .on() メソッドを使用すると、イベント ハンドラーを登録できます。 DOM 要素について。イベント処理に対する 2 つの異なるアプローチは、直接バインディングと委任バインディングです。ダイレクト バインディングでは、イベント ハンドラーを特定の要素に直接アタッチしますが、委任バインディングでは、親要素内のセレクターに一致する要素でのイベント処理が可能になります。

委任されたイベント ハンドラーに関する特定の段落の最後の文には、jQuery が「実行される」と記載されています。セレクターに一致する任意の要素のハンドラー。」これは、DOM のイベント バブリング メカニズムを指します。

セレクターを含む .on() を使用して、委任されたイベント ハンドラーが親要素にアタッチされると、イベントは選択された要素だけでなく、その子孫でも処理されます。セレクターに一致するもの。イベントが DOM ツリーをバブルアップすると、jQuery はパス上の要素がセレクターと一致するかどうかを確認し、一致が見つかった場合はハンドラーをトリガーします。

違いを説明するために、次の例を考えてみましょう。

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

これは、クリック ハンドラーをすべての に直接バインドします。 #target div 内の緑色のクラスを持つ要素。これらの各要素はクリック イベントを独立して処理します。

対照的に、次の例では委任バインディングが使用されています。

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

ここでは、クリック イベント ハンドラーは #target div にアタッチされていますが、セレクター「イベント バブリング」を「緑」に一致する要素に設定します。これは、将来の は、 #target div 内に作成された「green」クラスの要素も、クリック ハンドラーをトリガーします。

委任バインディングは、新しい要素が確実にイベントを継承するため、ページから要素を動的に追加および削除する場合に特に便利です。手動バインディングを必要とせずに動作を処理します。

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