jQuery イベントバインディングとデリゲート example

この記事の例では、jQuery イベントのバインディングと委任について説明します。皆さんの参考に共有してください。具体的な方法は以下の通りです。

JQuery イベントのバインディングと委任は、 on() 、 binding() 、 live() 、 delegate() 、 one() などのさまざまなメソッドを使用して実装できます。

場合によっては、次のようにイベントをバインドすることがあります:

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

$("#div1").click(function() { 

alert("クリック後にトリガー");
});

上記のイベントバインディングはさまざまな方法で実装できます。

1. に()

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

//データパラメータなし

$("p").on("クリック", function(){ 

アラート( $(this).text() );
}); 

//データパラメータがあります 

関数 myHandler(event) { 

アラート(event.data.foo);
}

$("p").on("click", {foo: "bar"}, myHandler)

on() に対応するのは off() で、イベント バインディングを削除するために使用されます。

コードをコピーコードは次のとおりです。var foo = function () { // 何らかのイベントを処理するコード

};

// ... これで、段落がクリックされたときに foo が呼び出されます ... 

$("body").on("click", "p", foo);

// ... foo は呼び出されなくなります。

$("body").off("click", "p", foo);

off(): on() によってバインディングを削除します

one(): バインドは 1 回だけです。

2.バインド()

パラメータ: (タイプ,[データ],関数(イベントオブジェクト)) type: 1 つ以上のイベントタイプを含む文字列。複数のイベントはスペースで区切られます。たとえば、「クリック」や「送信」、またはカスタムイベント名などです。

data:event.data 属性値

としてイベントオブジェクトに渡される追加のデータオブジェクト
fn: 一致する各要素のイベントにバインドされたハンドラー関数

(タイプ,[データ],false)
type: 1 つ以上のイベントタイプを含む文字列。複数のイベントはスペースで区切られます。たとえば、「クリック」や「送信」、またはカスタムイベント名などです。
data:event.data 属性値
としてイベントオブジェクトに渡される追加のデータオブジェクト
false: 3 番目のパラメータを false に設定すると、デフォルトのアクションが無効になります。

複数のイベントタイプを同時にバインドします:

コードをコピー

コードは次のとおりです:$('#foo').bind('mouseenter Mouseleave', function() { $(this).toggleClass('entered'); });

複数のイベント タイプ/ハンドラーを同時にバインドします:

コードをコピー

コードは次のとおりです:$("button").bind({ click:function(){$("p").slideToggle();}、 Mouseover:function(){$("body").css("背景色","赤");}, Mouseout:function(){$("body").css("背景色","#FFFFFF");}

});

イベント処理の前に追加のデータを渡すことができます。

コードをコピー

コードは次のとおりです。function handler(event) { アラート(event.data.foo); } $("p").bind("click", {foo: "bar"}, ハンドラー)

false を返すことでデフォルトの動作をキャンセルし、イベントのバブリングを防ぎます。 

コードをコピー

コードは次のとおりです。$("form").bind("submit", function( ) { 戻り値 false })

バインドの問題

クリックイベントがバインドされているテーブルに 10 列と 500 行がある場合、5000 個のセルを検索して走査すると、スクリプトの実行速度が大幅に低下し、5000 個の td 要素と対応するイベントハンドラーの保存にも時間がかかります。メモリを大量に消費します (全員が物理的にドアの前に立って配達を待っているのと同じです)。

前の例に基づいて、単純なフォトアルバムアプリケーションを実装したい場合、各ページには 50 枚の写真 (50 セル) のサムネイルのみが表示され、ユーザーは「ページ x」(または「次のページ」) リンクをクリックすると、 Ajax 経由でサーバーからさらに 50 枚の写真を動的にロードします。この場合、 .bind() メソッドを使用した 50 個のセルのバインディングイベントが再び受け入れられるようです。

そうではありません。 .bind() メソッドを使用すると、クリックイベントは最初のページの 50 個のセルにのみバインドされ、動的に読み込まれる後続のページのセルにはこのクリックイベントがありません。つまり、 .bind() は、呼び出されたときにすでに存在する要素にイベントをバインドすることしかできず、将来追加される要素にイベントをバインドすることはできません (新入社員が速達配送を受け取ることができないのと同様)。

イベント委任は、上記の 2 つの問題を解決できます。コードに固有の場合は、.bind() メソッドの代わりに jQuery 1.3 で新しく追加された .live() メソッドを使用してください:

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

$("#info_table td").live("click", function() {/*詳細情報を表示*/});

ここの .live() メソッドは、クリックイベントを $(document) オブジェクトにバインドします (ただし、これはコードから反映できません。これは、.live() メソッドが批判されている重要な理由でもあります。これについては後ほど説明します。詳細については後ほど説明します)。$(document) を 1 回バインドするだけで (50 回どころか 5000 回も)、その後に動的に読み込まれるフォトセルのクリックイベントを処理できます。イベントを受信すると、$(document) オブジェクトはイベントタイプとイベントターゲットを確認し、それがクリックイベントでイベントターゲットが td の場合、それに委任されたハンドラーが実行されます。

unbind():バインドによって実行されたバインディングを削除します。

3. ライブ()

これまでのところ、すべてが完璧に見えます。残念ながらそうではありません。 .live() メソッドは完璧ではないため、次のような大きな欠点があります:
$() 関数は、現在のページ内のすべての td 要素を検索し、jQuery オブジェクトを作成します。ただし、この td 要素コレクションは、イベントターゲットを確認するときに使用されず、代わりにセレクター式を使用して、event.target またはその祖先と比較します。したがって、この jQuery オブジェクトを生成すると、不要なオーバーヘッドが発生します。デフォルトでは、イベントは $(document) 要素にバインドされます。DOM の入れ子構造が非常に深い場合、多数の祖先要素を介してイベントがバブリングするとパフォーマンスが低下します。これは、直接選択された要素の後にのみ配置でき、連続した DOM トラバーサルメソッドの後には使用できません。つまり、$("#info_table td").live... は使用できますが、$("#info_table") .find("td" ).live...いいえ;
td要素を集めてjQueryオブジェクトを作成するのですが、実際に動作するのは$(document)オブジェクトなのでわかりにくいです。
解決策
不要な jQuery オブジェクトの生成を避けるために、「早期委任」と呼ばれるハックを使用できます。これは、$(document).ready() メソッドの外側で .live() を呼び出すことです。

コードをコピーしますコードは次のとおりです:(function($){ $("#info_table td").live("click",function(){/*詳細を表示*/}); })(jQuery);

ここで、(function($){...})(jQuery) は「すぐに実行される匿名関数」であり、名前の競合を防ぐためのクロージャを形成します。匿名関数内で、$parameter は jQuery オブジェクトを参照します。この匿名関数は、DOM の準備ができるまで待機せずに実行されます。このハックを使用する場合、ページの head 要素でスクリプトをリンクまたは実行する必要があることに注意してください。このタイミングを選択した理由は、この時点ではドキュメント要素が利用可能であり、スクリプトが body 終了タグの前に配置されても、DOM が完全に完了しているため意味がありません。その時点で利用可能です。 

イベントのバブリングによるパフォーマンスの低下を避けるために、jQuery は 1.4 以降、.live() メソッドを使用するときにコンテキストパラメーターの使用をサポートしています。

コードをコピー

コードは次のとおりです:$("td",$("#info_table")[0 ]). live("click",function(){/*詳細を表示*/});

このようにして、「トラスティ」がデフォルトの $(document) から $("#info_table")[0] に変更され、バブリングの手間が省けます。ただし、.live() で使用されるコンテキストパラメーターは別の DOM 要素である必要があるため、ここでは配列インデックス演算子を使用して取得される $("#info_table")[0] を使用してコンテキストオブジェクトを指定します。

4. デリゲート()

前述したように、単一の .bind() メソッドの制限を突破してイベント委任を実装するために、jQuery 1.3 では .live() メソッドが導入されました。その後、長すぎる「イベント伝播チェーン」の問題を解決するために、jQuery 1.4 では .live() メソッドのコンテキストオブジェクトの指定をサポートしました。要素コレクションの不必要な生成の問題を解決するために、jQuery 1.4.2 では新しいメソッド.delegate() が導入されました。

.delegate() を使用すると、前の例は次のように記述できます:

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

$("#info_table").delegate("td"," click", function(){/*詳細情報を表示*/});

.delegate() を使用すると、次のような利点があります (または、.live() メソッドの次の問題が解決されます):
ターゲット要素セレクター ("td")、イベント ("click")、およびハンドラーを "dragee" $("#info_table") に直接バインドします。追加の要素のコレクション、短縮されたイベント伝播パス、および明確なセマンティクスは必要ありません。 >

連続した DOM トラバーサルメソッドの後の呼び出しをサポートします。つまり、$("table").find("#info").delegate... をサポートし、正確な制御をサポートします。

.delegate() メソッドは比較的完璧なソリューションであることがわかります。ただし、DOM 構造が単純な場合は、.live() も使用できます。

ヒント: イベント委任を使用する場合、ターゲット要素に登録されている他のイベントハンドラーが .stopPropagation() を使用してイベントの伝播を防止すると、イベント委任は無効になります。

undelegate(): delegate
のバインディングを削除します。

この記事が皆さんの jQuery プログラミングに役立つことを願っています。