ホームページ  >  記事  >  ウェブフロントエンド  >  jQueryのbind()、one()、on()、live()バインディングイベント関数の違いは何ですか?

jQueryのbind()、one()、on()、live()バインディングイベント関数の違いは何ですか?

一个新手
一个新手オリジナル
2017-10-10 10:31:001919ブラウズ

1.bind() メソッド

は、一致する各要素の特定のイベントにイベント ハンドラーをバインドします。 bind() メソッドの基礎となるロジックは on() メソッドです。
.bind() メソッドは、ドキュメントに動作を付加する主な方法です。フォーカス、マウスオーバー、サイズ変更などのすべての JavaScript イベント オブジェクトを type パラメーターとして渡すことができます。
例:
.bind() の最も基本的な使用法は次のとおりです:

$('#foo').bind('click', function() {
  alert('User clicked on "foo."');
});

このコードにより、ID foo の要素がクリック イベントに応答するようになります。ユーザーが要素内をクリックすると、警告ボックスがポップアップ表示されます。

2. on() メソッド

は、選択された要素の 1 つ以上のイベントのイベント ハンドラー関数をバインドします。
on() メソッドは、現在選択されている jQuery オブジェクトの要素にイベント ハンドラーをバインドします。 jQuery 1.7 では、.on() メソッドはイベント ハンドラー をバインドするために必要なすべての機能を提供します。
jQueryのbind()、one()、on()、live()バインディングイベント関数の違いは何ですか?
パラメータの説明:
events: スペースで区切られた 1 つ以上のイベント タイプと、「click」や「keydown.myPlugin」などのオプションの名前空間。
selector: フィルターのイベントをトリガーするセレクター要素の子孫のセレクター文字列。選択された data: イベントがトリガーされると、event.data をイベント ハンドラー関数に渡す必要があります。
fn: このイベントがトリガーされたときに実行される関数。 false 値は、false を返す関数の短縮形としても使用できます。

3. one() メソッド

は、one-time イベント ハンドラーを、一致する各要素の特定のイベント (クリックなど) にバインドします。
各オブジェクトで、この イベント ハンドラー関数は 1 回だけ実行されます 。その他のルールはbind()関数と同じです。このイベント ハンドラーは、デフォルトの動作を防ぐために使用できるイベント オブジェクトを受け取ります。デフォルトの動作をキャンセルしてイベントのバブリングを防止したい場合は、イベント ハンドラーが false を返す必要があります。
jQueryのbind()、one()、on()、live()バインディングイベント関数の違いは何ですか?
パラメータの説明:
type: 要素に追加される 1 つ以上のイベント。スペースで区切られた複数のイベント。有効なイベントである必要があります。
data: イベント処理関数に渡されるデータマッピング
fn: イベントがトリガーされるたびに実行される関数。

4. live() メソッド

jQuery は、一致するすべての要素にイベント ハンドラー関数を付加します。この要素が後で追加された場合でも有効です
jQueryのbind()、one()、on()、live()バインディングイベント関数の違いは何ですか?

このメソッドは基本的に .bind() メソッドの変形です。 .bind() を使用する場合、セレクターによって一致した要素にはイベント ハンドラーが付加されますが、後で追加された要素にはイベント ハンドラーが付加されません。これには、.bind() を再度使用する必要があります。
イベント委任:
.live() メソッドは、イベント委任を使用するため、DOM に追加されていない要素に対して有効です。祖先要素にバインドされたイベント ハンドラーは、子孫でトリガーされたイベントに応答できます。 。 応答する。 .live() に渡されるイベント ハンドラーは要素にバインドされませんが、特別なイベント ハンドラーとして扱われ、DOM ツリーのルート ノードにバインドされます。
追記:
.live() は便利ですが、その特殊な実装のため、いかなる場合でも単純に .bind() を置き換えることはできません。主な違いは次のとおりです:

  1. jQuery 1.4 では、.live() メソッドはカスタム イベントをサポートし、すべての JavaScript イベントもサポートします。 jQuery 1.4.1 では、フォーカス イベントとブラー イベント (より適切でバブリングする focusin および focusout にマッピングされます) もサポートされています。さらに、jQuery 1.4.1 では、ホバー (「mouseenter Mouseleave」にマッピング) もサポートされます。ただし、jQuery 1.3.x では、サポートされている JavaScript イベントとカスタム イベント (click、dblclick、keydown、keypress、keyup、mousedown、mousemove、mouseout、mouseover、mouseup) のみがサポートされています。

  2. .live() は要素をサポートしません。 DOM トラバーサル経由で見つかったものは完全にサポートされています。代わりに、前の例で述べたように、常にセレクターの直後に .live() メソッドを使用する必要があります。

  3. イベント処理関数が .live() にバインドされており、他のイベント処理関数の実行を停止したい場合、この関数は false を返す必要があります。 単に .stopPropagation() を呼び出すだけではこれは実現できません。

特記事項:

jQuery 1.7 以降、.live() メソッドは推奨されなくなりました。イベント処理を追加するには .on() を使用してください。

以上がjQueryのbind()、one()、on()、live()バインディングイベント関数の違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。