この記事の例では、jQuery イベントのバインディングと委任について説明します。皆さんの参考に共有してください。具体的な方法は以下の通りです。
JQuery イベントのバインディングと委任は、 on() 、 binding() 、 live() 、 delegate() 、 one() などのさまざまなメソッドを使用して実装できます。
場合によっては、次のようにイベントをバインドすることがあります:
1. に()
2.バインド()
パラメータ:
(タイプ,[データ],関数(イベントオブジェクト))
type: 1 つ以上のイベント タイプを含む文字列。複数のイベントはスペースで区切られます。たとえば、「クリック」や「送信」、またはカスタム イベント名などです。
としてイベント オブジェクトに渡される追加のデータ オブジェクト
fn: 一致する各要素のイベントにバインドされたハンドラー関数
(タイプ,[データ],false)
type: 1 つ以上のイベント タイプを含む文字列。複数のイベントはスペースで区切られます。たとえば、「クリック」や「送信」、またはカスタム イベント名などです。
data:event.data 属性値
としてイベント オブジェクトに渡される追加のデータ オブジェクト
false: 3 番目のパラメータを false に設定すると、デフォルトのアクションが無効になります。
複数のイベント タイプを同時にバインドします:
コードをコピー
コードをコピー
コードをコピー
コードをコピー
バインドの問題
クリック イベントがバインドされているテーブルに 10 列と 500 行がある場合、5000 個のセルを検索して走査すると、スクリプトの実行速度が大幅に低下し、5000 個の td 要素と対応するイベント ハンドラーの保存にも時間がかかります。メモリを大量に消費します (全員が物理的にドアの前に立って配達を待っているのと同じです)。
前の例に基づいて、単純なフォト アルバム アプリケーションを実装したい場合、各ページには 50 枚の写真 (50 セル) のサムネイルのみが表示され、ユーザーは「ページ x」(または「次のページ」) リンクをクリックすると、 Ajax 経由でサーバーからさらに 50 枚の写真を動的にロードします。この場合、 .bind() メソッドを使用した 50 個のセルのバインディング イベントが再び受け入れられるようです。
そうではありません。 .bind() メソッドを使用すると、クリック イベントは最初のページの 50 個のセルにのみバインドされ、動的に読み込まれる後続のページのセルにはこのクリック イベントがありません。つまり、 .bind() は、呼び出されたときにすでに存在する要素にイベントをバインドすることしかできず、将来追加される要素にイベントをバインドすることはできません (新入社員が速達配送を受け取ることができないのと同様)。
イベント委任は、上記の 2 つの問題を解決できます。コードに固有の場合は、.bind() メソッドの代わりに jQuery 1.3 で新しく追加された .live() メソッドを使用してください:
これまでのところ、すべてが完璧に見えます。残念ながらそうではありません。 .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() を呼び出すことです。
コードをコピー
このようにして、「トラスティ」がデフォルトの $(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() を使用すると、前の例は次のように記述できます:
.delegate() を使用すると、次のような利点があります (または、.live() メソッドの次の問題が解決されます):
ターゲット要素セレクター ("td")、イベント ("click")、およびハンドラーを "dragee" $("#info_table") に直接バインドします。追加の要素のコレクション、短縮されたイベント伝播パス、および明確なセマンティクスは必要ありません。 >
.delegate() メソッドは比較的完璧なソリューションであることがわかります。ただし、DOM 構造が単純な場合は、.live() も使用できます。
ヒント: イベント委任を使用する場合、ターゲット要素に登録されている他のイベント ハンドラーが .stopPropagation() を使用してイベントの伝播を防止すると、イベント委任は無効になります。
undelegate(): delegate
のバインディングを削除します。