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

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

jQuery .on() メソッドには、イベント処理のための 2 つのオプションがあります。直接と委任。委任された処理のコンテキストでは、ドキュメントには、イベントがバインドされた要素で直接発生した場合にはイベント ハンドラーが呼び出されるのではなく、セレクターに一致する子孫に対してのみ呼び出されることが記載されています。ただし、「任意の要素のハンドラーを実行する」とは正確に何を意味するのかという疑問が生じます。

直接イベント処理

直接イベント処理では、イベント ハンドラー次の構文を使用して要素に直接割り当てられます:

$("selector").on("event", function() {...});

この場合、イベント ハンドラーはそれぞれの要素にアタッチされます。セレクターに一致する要素。たとえば、次のコードは、クリック ハンドラーをすべての に割り当てます。

内のクラスが green の要素ID ターゲット:

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

委任されたイベント処理

委任されたイベント処理では、次の構文を使用してイベント ハンドラーが親要素に割り当てられます:

$("parent").on("event", "child selector", function() {...});

この場合、イベント ハンドラーは親要素に割り当てられていますが、応答するのは子セレクターと一致する子孫要素で発生するイベント。この方法は、ページが最初に読み込まれるときに存在しない動的コンテンツにイベント ハンドラーをアタッチする場合に便利です。

次の例を考えてみましょう:

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

この例では、クリック ハンドラーがアタッチされています。

へID ターゲットを使用します。ただし、 である子孫要素で発生するクリックにのみ応答します。

主な違い

直接イベント処理と委任されたイベント処理の主な違いは、ターゲット要素とイベントを処理する要素との関係にあります。 。直接イベント処理では、ターゲット要素はイベントを処理する要素でもあります。委任されたイベント処理では、ターゲット要素はイベントを処理する要素の親です。

実際的な意味

一般に、を使用する場合は委任されたイベント処理が優先されます。時間の経過とともに変化する可能性のある動的コンテンツ。イベント ハンドラーを親要素にアタッチすると、新しい要素がページに追加された場合でもイベントが確実に処理されます。直接イベント処理は、時間が経っても変化しない静的コンテンツに適しています。

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