javascript - jQueryイベントバインディングのオンとオフの問題

Question

コードは以下のように表示されます:

リーリー

なぜこのコードは、初めてクリックされたときにハンドラー 1 とハンドラー 2 を出力するのですか? ハンドラー 1 のオフは機能しますが、ハンドラー 2 はまだ 1 回実行されます。理由は何ですか?
jQuery ドキュメントを参照してください

ドキュメントの説明は次のとおりです: 現在の要素にイベント ハンドラーを追加または削除しても、次回イベントが処理されるまで有効になりません。
私の英語が下手すぎるのかもしれません。この場所はあまり良くないように感じます。 同じイベントの追加または削除は、現在の処理中は無効です。たとえば、2 回のクリックを次のように変更します リーリー

すると、handler1 のみが出力され、mousedown でのマウスアップをオフにすることが成功していることがわかります。

最初に戻りますが、現在の処理中に同じイベントの追加または削除が無効になるのはなぜですか? (jQueryのソースコードを探してみましたが、かなり複雑だったので断念しました)

Answer 1

やはりソースコードから始める必要があります

まずここを見てください: https://github.com/jquery/jqu...

リーリー

これは、イベント配布のコア コードの始まりです。 jquery は、イベントを配布するときにイベント コールバックのリストを見つけるために this.event.handler を呼び出す必要があることがわかります。 ここでの handlerQueue は一部のコピーにすぎません。これは内部イベント リストであり、コピーされた handlerQueue には影響しません。

すべてのイベント コールバック関数がポットに保存されているようなものです。イベントが発生すると、jquery はコールバックをコピーしてボウルに入れ、ボウル内の関数を順番に実行します。 OFFで変化するのは鍋内の機能のみで、ボウル内の機能には影響しません。

Answer 2

on はコンポーネントのイベント処理配列に処理メソッドを追加すること、off は配列からこのメソッドを削除することと考えることができます。イベントがトリガーされると、jq はイベント処理配列内のメソッドを一度に実行します。では、イベント処理メソッドで off が呼び出されるとどうなるでしょうか。ドキュメントには非常に明確に書かれています。現在のイベントトリガーループでは、処理メソッドはすぐに配列から削除されません、バインドされたイベントが再度トリガーされた場合にのみ反映されます。

Answer 3

皆さんありがとうございます
問題が見つかりました。その理由は、jq が内部でイベントをカプセル化するときに、同じ型のイベントが同じ配列に追加され、イベントがトリガーされると、トラバーサルがこの配列のコピーになるためです。 Off ではコピーは変更されないので、最初のクリック時に Hanler2 が出力されます。mousedown と Mouseup は異なる種類のイベントなので、2 つの配列にカプセル化されます。そのため、mouseup を無効にするのが効果的です。マウスダウン。表現が下手かもしれませんが、メインのjqソースコードを数行載せてください

リーリー