jQuery の新しいイベント バインディング メカニズム on()_jquery を使用する際のヒント

今日、jQuery の非推奨リストを参照して、その中に live() と die() を見つけました。すぐに調べてみると、jQuery 1.7 から、jQuery に新しいイベント バインディング メカニズムである on() と off() が導入されていることがわかりました。 2 つの関数はイベント バインディングを均一に処理します。以前はイベント バインディングを処理するメソッドとして、bind()、live()、delegate() などのメソッドがあったため、jQuery はパフォーマンスの最適化とメソッドの統合の観点から、イベント バインディング メソッドを統合し、以前のメソッドを置き換える新しい関数を立ち上げることにしました。 。

on(events,[selector],[data],fn)

events: スペースで区切られた 1 つ以上のイベント タイプと、「click」や「keydown.myPlugin」などのオプションの名前空間。

selector: フィルター イベントをトリガーするセレクター要素の子孫のセレクター文字列。セレクターが null であるか省略されている場合、イベントは選択された要素に到達すると常に発生します。

data: イベントがトリガーされると、event.data がイベント処理関数に渡される必要があります。

fn: イベントがトリガーされたときに実行される関数。 false 値は、false を返す関数の短縮形としても使用できます。

bind() を置き換えます

2 番目のパラメーター 'selector' が null の場合、基本的に on() と binding() の使用法に違いはありません。そのため、on() には、bind() の 'selector' パラメーターよりもオプションが 1 つ多いだけであると考えることができます。 、など on() は簡単に binding() を置き換えることができます

ライブを置換()

1.4 より前は、イベントを現在および将来の要素にバインドできるため、誰もが live() を好んで使用していたと思います。もちろん、1.4 以降では、delegate() も同様のことを実行できます。 live() の原理は非常に単純で、ドキュメントを通じてイベントを委任するため、on() を使用してイベントをドキュメントにバインドすることで live() と同じ効果を実現することもできます。

ライブの書き方()

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

$('#list li')。 live(' click', '#list li', function() {
//関数コードはここにあります。
});

on() の書き込みメソッド

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

$( document).on('click ', '#list li', function() {
//関数コードはここにあります。
});

ここで重要なのは、2 番目のパラメータ「セレクター」は機能しています。これはフィルターとして機能し、選択した要素の子孫要素のみがイベントをトリガーします。

delegate() を置き換える
delegate() は、祖先要素を介して子孫要素のイベント バインディングの問題をある程度委任するために 1.4 で導入されました live() と同様の利点。 live() が document 要素を通じて委任されるだけであり、デリゲートは任意の祖先ノードにすることができます。 on()を使ってプロキシを実装する場合の書き方は、基本的にdelegate()と同じです。

delegate()の書き方

コードをコピー コードは次のとおりです。次のように:

$('#list').delegate('li', 'click', function() {
//ここに関数コード。
});

on() メソッドの記述

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

$('#list').on('click', 'li', function() {
//ここに関数コードがあります。
});

第一パラメータと第二パラメータの順序が逆になっているように見えますが、それ以外は基本的に同じです。

概要
jQuery は 2 つの目的で on() を起動しました。1 つはインターフェイスの統合で、もう 1 つはパフォーマンスの向上です。そのため、今後は on() を使用してください。 onbind()、live()、delegate を置き換えます。特に、 live() はすでに非推奨リストに含まれており、いつでも強制終了されるため、今後は使用しないでください。イベントを 1 回だけバインドし、one() を使用する場合、これに変更はありません。