直接対委任 – jQuery .on()

直接委任されたイベントハンドラのこの特定の違いを理解しようとしています。
= “noreferrer”>
jQuery
.on()メソッドを使用します。具体的には、この段落の最後の文:

セレクタが指定されている場合、イベントハンドラは delegated
と呼ばれます。バインドされた要素でイベントが直接発生したときにハンドラが呼び出されるのではなく、セレクタに一致する子孫(内部要素)に対してのみハンドラが呼び出されます。
jQueryはイベントをイベントターゲットからハンドラがアタッチされている要素(つまり最も内側の要素から最も外側の要素)までバブリングし、そのパスに沿ってセレクタに一致する要素のハンドラを実行します。

「要素のハンドラを実行する」とはどういう意味ですか?このコンセプトを試すためにテストページを作成しました。しかし、次の両方の構成は同じ動作につながります。

$("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(直接):

$("div#target span.green").on("click", function() {...});

==ねえ!私はdiv#targetの中のすべてのspan.greenを聞いて欲しい。あなたがクリックされたらXをする。

ケース2(委任済み):

$("div#target").on("click", "span.green", function() {...});

==ねえ、div#target!
“span.green”であるあなたの子要素のいずれかがクリックされると、Xをそれらと一緒に実行します。

言い換えれば…

ケース1では、各スパンに個別に指示が与えられています。新しいスパンが作成されると、指示を聞かずにクリックに反応しなくなります。各スパンは、独自のイベントに対して直接責任を負います

ケース2では、コンテナのみが命令を与えられている。
子要素の代わりにクリックに気づく責任があります。イベントをキャッチする作業は委任されました。これは、将来作成される子要素に対しても命令が実行されることを意味します。

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です