Jqueryのイベントバインディングの概要

はじめに

jqueryはプロジェクト内でdom要素の追加や削除によく使われるので、今後の参考のためにbind、live、delegate、onの違いを簡単にまとめておきます。この記事が今後友人に役立つように、何か問題があれば指摘して伝えたいと思います。

一.bind()

簡単な説明

bind() は、一致する要素に 1 つ以上のイベント ハンドラーを追加します。

使用法

$(selector).bind(event,data,function)

event: 要素に追加される 1 つ以上のイベント (click、dblclick など)

単一イベント処理: など$ (selector).bind("click",data,function);

複数のイベントの処理: 1. $(selector).bind("click dbclick Mouseout",data,function) のように、スペースを使用して複数のイベントを区切ります。 ;

2. $(selector).bind({event1:function,event2:function, ...}) のように、中括弧を使用して複数のイベントを柔軟に定義します。

3. バインディングは比較的厳格です。定義された関数。同じ関数を呼び出す複数のイベントを処理するのに適しています。

代替: バインディングはより柔軟であり、関数をイベントに個別にバインドできます。

data: 渡す必要があるパラメーター。

function: required ; binding イベントが発生したときに実行する必要がある関数。

Jquery バージョンに適用可能

すべてのバージョンに適用可能ですが、公式 Web サイトによると、jquery1.7 バージョン以降、bind()関数は on() に置き換えることをお勧めします。

2.Live()

簡単な説明

live() は、現在または将来の一致する要素に 1 つ以上のイベント ハンドラーを追加します。

event: 要素に追加される 1 つ以上のイベント (click、dblclick など)

単一イベント処理: $(selector).live("click",data,function);

Multi -イベント処理: 1. スペースを使用して複数のイベントを区切ります (例: $(selector).live("click dbclick Mouseout",data,function);

2. 中括弧を使用して複数のイベントを柔軟に定義します (例: $(selector) ).live ({event1:function,event2:function, ...})

3. スペース分離方法: バインディングは比較的厳格であり、同じ関数を呼び出す複数のイベントを処理するのに適しています。

代替方法: バインディングはより柔軟であり、関数をイベントに個別にバインドできます。

data: 渡す必要があるパラメーター。

Jquery バージョンに適用

jquery1.9 以降はこのメソッドを削除し、代わりに on() メソッドを使用します。

Three.delegate()

簡単な説明

delegate() は、指定された要素 (選択された要素の子要素) に 1 つ以上のイベント ハンドラーを追加し、これらのイベントが発生したときに実行する関数を指定します。 delegate() メソッドを使用するイベント ハンドラーは、現在または将来の要素 (スクリプトによって作成される新しい要素など) に適用されます。

使用法

$(selector).delegate(childSelector,event,data,function)

childSelector: イベントハンドラーを追加する必要がある要素。通常は selector の子要素です。

event: 必須の項目。要素に追加された複数のイベント (click、dblclick など)

単一イベント処理: $(selector).delegate(childselector, "click", data, function) など;

複数イベント処理: 1 $(selector).delegate(childselector,"click dbclick Mouseout",data,function);のように、複数のイベントをスペースで区切ります。

2. $(selector).delegate のように、中括弧を使用して複数のイベントを柔軟に定義します。 (childselector,{event1 :function,event2:function, ...})

3. バインディングは比較的厳格であり、同じ関数を呼び出す複数のイベントを処理するのに適しています。

中括弧の代替方法: バインディングはより柔軟であり、関数をイベントに個別にバインドできます。

data: 渡す必要があるパラメーター。バインディング イベントが発生したときに実行する必要がある関数。 ;

Jquery バージョンに適用可能

jquery1.4.2 以降。 on() メソッドを使用するイベント ハンドラーは、現在または将来の要素 (スクリプトによって作成された新しい要素など) に対して動作します。

使用方法

$(selector).on(event,childselector,data,function)

event: 要素に追加される 1 つ以上のイベント (click、dblclick など);

単一イベント処理: 例: $(selector).on("click",childselector,data,function);

複数のイベントの処理: 1. $(selector).on("click dbclick Mouseout など、スペースを使用して複数のイベントを区切ります",childseletor,data ,function);

2. $(selector).on({event1:function,event2:function, ...},childselector);

3 のように、中括弧を使用して複数のイベントを柔軟に定義します。スペース分離方法: バインディング 比較的厳格であり、同じ関数を呼び出す複数のイベントを処理するのに適しています。

バインディングはより柔軟であり、関数をイベントに個別にバインドできます。

childSelector: イベントハンドラーを追加する必要がある要素、通常はセレクターの子要素。

function: 実行する必要がある関数。バインディング イベントの発生時;

Jquery バージョンに適用

jquery1.7 以降; jquery1.7 バージョンは、出現後にバインディング イベント メソッドの binding()、live() を置き換えるために使用されます;

5。 4 つのメソッドの違い、利点、欠点:

1. どちらも、単一要素と複数のイベントのバインディングをサポートします。どちらもイベント バブリングを使用してイベントを渡します。イベント応答のドキュメント

6. 比較と接続:

1. binding() 関数は既存の要素のイベントのみを設定できますが、live()、on()、および delegate() はすべて新しく追加されたイベントの設定をサポートします。将来の要素;

2. jquery バージョン 1.7 より前は、bind() 関数が比較的人気がありましたが、バージョン 1.7 のリリース以降、公式政府は、代わりの関数 on() の使用を推奨しなくなりました。同様に、バージョン 1.7 で新しく追加された関数です。

バージョン 1.9 で削除された live() 関数を置き換えることもできます。 live() 関数は delegate() 関数に似ています。ただし、実行速度、柔軟性、CSS の点では、live() 関数の方がパフォーマンスが優れています。セレクターのサポートという点では、delegate() よりも優れています。

4.bind() は、Jquery のすべてのバージョンをサポートします。 live() は、jquery1 をサポートします。 .8-; delegate() は jquery1.4.2 以降をサポートします; on() は jquery1.7 以降をサポートします

プロジェクトで参照されている jquery バージョンが以前のバージョンである場合は、delegate() を使用することをお勧めします。 jquery の上位バージョンでは、代わりに on() を使用できます。上記は単なる個人的な意見です。異なるアイデアがある場合は、お気軽にお問い合わせください。