0

ここでベストプラクティスを探しています。しかし、最近アプリをjQuery 1.4から1.8にアップグレードしたところ、すべてのlive呼び出しをゆっくりと切り替えていonます。

$(document).on('click', 'a.edit', function(){

から ：

$("a.edit").live(function() {

  1. ドキュメント以外のより具体的なものにバインドする方が速いでしょうか？

  2. これら2つの呼び出しの間に速度の違いはありますか？

4

3 に答える 3

4

ドキュメントにイベントを委任するということは、クリックするとドキュメント内のすべての要素がイベントハンドラーを起動し、ターゲットが一致するかどうかを確認することを意味しますa.edit。これは多くの確認です。に近い要素に絞り込むとa.edit、イベントハンドラーを起動する要素が少なくなり、指定したターゲットとの一致をチェックする要素が少なくなります。

jQueryドキュメントから：

.live（）メソッドの使用は推奨されなくなりました。これは、jQueryの新しいバージョンでは、欠点のない優れたメソッドが提供されているためです。特に、.live（）を使用すると、次の問題が発生します。

jQueryは、.live（）メソッドを呼び出す前に、セレクターによって指定された要素を取得しようとします。これは、大きなドキュメントでは時間がかかる場合があります。連鎖方法はサポートされていません。たとえば、$（ "a"）。find（ "。offsite、.external"）。live（...）; は無効であり、期待どおりに機能しません。すべての.live（）イベントはドキュメント要素に添付されるため、イベントは処理される前に可能な限り長く、最も遅いパスをたどります。イベントハンドラーでevent.stopPropagation（）を呼び出すことは、ドキュメントの下部にアタッチされているイベントハンドラーを停止するのに効果的ではありません。イベントはすでにドキュメントに伝播されています。.live（）メソッドは、驚くべき方法で他のイベントメソッドと相互作用します。たとえば、$（document）.unbind（ "click"）は、.live（）の呼び出しによってアタッチされたすべてのクリックハンドラーを削除します。

基本的には次のようなものです。

$(document).click(function(e) {
    if (e.target == ourElement) {
        //hey, our element was clicked and bubbled all the way to the root, 
        //so let's do something
    }else{
        //we just jumped through some hoops, but this is not the element we 
        //are looking for, so do nothing...and we do this on every click !
    }
});
于 2012-08-27T16:44:27.500 に答える
1

@adeneoの答えを少し拡張するには、

$(document).on('click','a.edit',function(){...});

イベントハンドラーをドキュメントに添付します。documentはDOMのルートであるためdocument、途中のある時点で伝播が停止されない限り、すべてのイベントは最終的にバブルアップします。

あなたの例では、これは、クリックするたびにイベントハンドラーがトリガーされることを意味します。次に、ハンドラーはevent.target、クリックのソースが提供されたセレクター（この場合はa.edit）と一致するかどうかを確認します。clickWebページで発生する最も一般的なイベントではないにしても、ここで多くの処理が行われることを考慮してください。

イベントを委任するときのベストプラクティスは、イベントハンドラーでターゲットにしている要素の中で最も近い共通の祖先を選択することです（明らかに、ハンドラーをjQueryでアタッチできるように、要素は実行時に存在する必要があります）。これにより、イベントハンドラーが不必要に起動される回数が最小限に抑えられ、すべてのターゲット要素が1回の呼び出しで確実にキャプチャされます。.on

于 2012-08-27T16:50:47.977 に答える
1

クリックされた要素がクリックされたかどうかを確認する必要があるため、2つの方法の間に速度の違いはありませa.editん。これには、同じ時間がかかります。

ただし、チェックが呼び出される回数には違いがあります。リスナーをアタッチすると、クリックdocumentするたびにチェックが実行されます。あなたが他の方法でそれをするならば、それははるかに頻繁です。

ただし、（速度に関係なく）主な違いは

$(document).on('click', 'a.edit', function(){

と

$('a.edit').on('click', function(){

最初のものは、後で作成する可能性のあるすべての既存および将来の要素にclickリスナーをバインドします。2つ目は、リスナーを既存の要素にのみバインドします。

于 2012-08-27T16:55:00.247 に答える