jQuery のバインド イベントとライブ イベント、およびデリゲートとバインディング イベントのメソッドと違いについて詳しく説明します。

jQuery は、bind、live、delegate、on という 4 つの event 監視メソッドを提供します。監視のブロックを解除する対応する関数は、unbind、die、undelegate、off です。

既知のリスト要素は 4 つあります:

リスト要素 1

リスト要素 2

リスト要素 3

リスト要素 4

1.bind

bind(type,[data],function(eventObject))

bind はより頻繁に使用されるもので、その機能は Bind です。選択された要素に対する特定のイベント タイプのリスニング関数。パラメータの意味は次のとおりです。

type: クリック、変更、マウスオーバーなどのイベント タイプ。

data: 渡されるパラメータ 。 listen 関数に対して、event.data を介して取得されます。オプション;

関数: イベントオブジェクトを渡すことができます。ここでのイベントは、ネイティブのイベントオブジェクトとは異なるものであることに注意してください。

ソースコード:

bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
}

onメソッドが内部的に呼び出されていることが分かります。

bindの特徴は、リスナーを対象の要素に1つずつバインドすることです。ページ上の要素が動的に追加されない場合に使用しても問題ありません。ただし、「リスト要素 5」がリストに動的に追加された場合、それをクリックしても応答がないため、再度バインドする必要があります。

2. live

live(type, [data], fn)

live のパラメータは、bind と同じです。何が問題なのでしょうか。まずソースコードを見てみましょう:

live: function( types, data, fn ) {
jQuery( this.context ).on( types, this.selector, data, fn );
return this;
}

live メソッドがリスナーをバインドしていないことがわかります。それ自体 (this) 本体ですが、this.context にバインドされています。

live はイベント委任メカニズムを使用してイベントの監視と処理を完了し、ノードの処理を document に委任します。

イベント委任を使用する利点は、新しく追加された要素でリスナーを再度バインドする必要がないことが一目瞭然です。

3. delegate

リスニングイベントを最も近い親要素、ソースコードにバインドします:

delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
}

これで、イベントの委任を使用できるだけでなく、委任のオブジェクトも選択できるようになりました。やっぱり同じ人に迷惑をかけるのは良くないですよね。結局のところ、多くの親要素が存在する可能性があるため、デリゲート オブジェクトを選択する方法については一定の戦略が必要です。最も近い「安定した」要素を選択するのが原則だと思います。最も近い要素を選択する理由は、イベントがより速くバブルし、できるだけ早く処理できるようにするためです。いわゆる「安定」とは、親要素が最初からページ上にあり、動的に追加されず、将来消えないことを意味します。これにより、親要素が常にその子を監視できるようになります。

4. on

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

のパラメータはデリゲートのパラメータと似ていますが、まだ若干の違いがあります。第一に、タイプとセレクタの位置が変更され、第二に、セレクタがオプションになりました。

$('#myol li').on('click',getHtml);

イベントが見れます。現在対象はliそのもので、バインドと同じ効果があります。セレクターを渡すことに関しては、パラメーターの順序が異なることを除いて、デリゲートと同じ意味を持ち、その他はまったく同じです。

以上がjQuery のバインド イベントとライブ イベント、およびデリゲートとバインディング イベントのメソッドと違いについて詳しく説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。