JQureyイベントバインディング方法と違い
3025 ワード
JQureyにおいて、イベントをバインディングする方法は、ビッド()、ライブ()、delegate()、およびon()を含む.
$(selector).bind(event, data, function)
//jquery1.9 ,jquery1.9
$(selector).live(event, data, function)
//jquery1.4.2
$(selector).delegate(childSelector, event, data, function)
//jquery1.7 ;jquery1.7 bind(),live() ;
$(selector).on(event, childselector, data, function)
注:イベント:必須項目;要素に追加された1つまたは複数のイベント、例えばclick、dblclickなど.単一イベント処理:例えば$(selector).bind("click",data,function)
多イベント処理:1.スペースで複数イベントを分離する、例えば$(selector).bind("click dbclick ",data,function)
2.大かっこを利用して複数イベントを柔軟に定義する、例えば$(selector).bind({event1:function, event2:function, ...})
スペース間隔の方式:より堅固に結合されており、イベントに単独で結合された関数を与えることができず、複数のイベントを処理して同じ関数の状況を呼び出すのに適している.大括弧の代替方法:より柔軟に結合し、イベントの個別バインディング関数を与えることができます.ダタ:オプション;伝達するパラメータが必要です.必要ですバインディングイベントが発生したときに実行する関数.すべてのバージョンを適用します.A.bind方法1.jQuery 1.0から2が存在します.要素に直接結びつけて、ブラウザをまたいで、互換性のある問題をうまく解決できます.3.簡単な実現方法(例えば.click()、hover()4.idを利用して選択した要素は非常に良いです.すぐにhookで解決できます.また、イベントが発生した場合、方法は直ちに実行できます.(後のライブに対して、delegate)実現方法の欠点:1.イベントはすべての選択された要素に結び付けられますが、実行後に動的に追加された要素に結び付けられません.効率問題があります.元素に適合すると、多くなります.3.ページがロードされた時に、ビnd()ができます.ローディング効率B.ライブ方法1.泡を作って要素に結びつけるのは、イベント依頼の概念を使って、リストの種類により、Dcument DOMノードに結び付けられます.発泡的な関与があるためには、確かに遅延がありますが、結合する時は特に早いです.4.と.bind()比較すると、各要素にイベントを結びつける必要がなく、1回だけdocumentにバインディングすればいいという利点があります.これは一番早い方法ではないですが、少なくとも無駄です.利点:1.一回だけのイベントバインディングはdocumentに結び付けられます.2.動的に追加されたelementは、すでにバインディングされているイベントをトリガします.3.documeでもいいです.nt readyの前に、必要なイベントの欠点を結びつけます.1.1.7からはもう勧められなくなりました.だから、あなたもだんだん淘汰し始めます.2.event.stopPropagationを使う時(またはcancel Bubble)無効な3.効率の問題です.すべてのselector/eventはdocumentに結び付けられていますので、そのイベントが呼び出された時はとても遅くなります.イベントの要素があなたのDOMツリーの中に深くある時は、効率的な問題があります.要素に直接結合する2.jQueryは、すべてのselector/eventを反復的に検索してそのサブ要素を決定してマッチングすることができます.ルート要素に結合することを決定して、検索する要素を効果的に減らすことができます.動的に追加された要素にD.onメソッドJQurey 1.9バージョンを使用して、以前の3つの方法の新しいイベントバインディング機構を統合して、onによってバインディングすることができます.件は、オフを通じて解除します.