jQuery イベント バインディングの簡単な概要とアプリケーション。on()_jquery

数日前に「JQuery Basics Tutorial」を読んでいたところ、live()メソッドがあまり詳しく書かれていなかったので、live()とdelegate()について調べてみました。

その後、live() がどこかで削除されていることがわかりました。申し訳ありませんが、最新の jq ソース コードを見に行きました。バージョン 1.9.1 になっています。 live() は以前に削除されたバージョンですか?

ソースコードを見ると、bind() と delegate() はどちらも on() によって実装されていることがわかりました。 on() の説明は次のとおりです:

コードをコピー コードは次のとおりです:

.on( events [ , selector ] [, data ], handler(eventObject) )

$('button').on('click',function() などの単純なイベント バインディング{}); binding() も同様です。

イベントをより多くの要素にバインドする必要がある場合は、イベント委任を優先してください。これにより、パフォーマンス上の利点が得られます。例:

上の図に示すように、クリック イベントをドキュメント オブジェクトにバインドします。ページ上の任意の要素で発生したクリック イベントはドキュメント オブジェクトにバブルアップされて処理されます。

.on(): セレクターの説明にある 2 番目のオプションのパラメーターに注目してください。以下に示すように、2 番目のパラメーター、セレクター ボタンが追加されます:

結果:

イベントがドキュメント オブジェクトにバブルアップすると、イベントのターゲットが検出され、それが受信セレクター (ここにあるボタン) と一致する場合、イベントがトリガーされます。そうでない場合、イベントはトリガーされません。

.on() はオブジェクト パラメータも受け取ることができることに注意してください。オブジェクトの属性はイベント タイプであり、属性値はイベント処理関数です。公式ドキュメントの例を次に示します:

最後のポイントは、元の live() メソッドと処理関数がデフォルトでドキュメント オブジェクトにバインドされており、変更できないことです。DOM の入れ子構造が非常に深い場合、多数の祖先要素を介したイベントのバブリングが発生する可能性があります。大きなパフォーマンスの低下。 .on() メソッドを使用すると、イベントは $() 関数のセレクター式によって一致する要素にのみバインドされるため (上記の例では、簡単にするためにドキュメントにバインドされています)、イベントを正確に配置できます。ページ部分、イベントバブリングのオーバーヘッドも削減できます。 delegate() は on() と同じです。結局のところ、on() を使用して実装されます: