2012-04-04 12 views
3

私は巨大な量のchild divs(約4k〜5k!)を持っています。各子供には'mousedown''mouseup'イベントが添付されています。jQueryイベントのパフォーマンス:各イベントの親イベントまたは個別イベントに1つのイベントをバインドしますか?

代わりに、これらのイベントを親に1回添付し、$(e.target)を使用して子を選択する必要がありますか?パフォーマンス上の優位性があるのでしょうか?もしそうなら、なぜですか?

ありがとうございます!

答えて

6

jquery.on()を使用することが理想的でしょう。あなたのHTMLは次のようになります

$("#divWithHugeAmountsOfChildDiv").on("mousedown", 
             ".childCLASSEStoMouseDown", 
             function() 
{ 
    alert("Booya!"); 
}); 

:必要に応じてjQueryのセレクタを変更

<body> 
    <!-- lots of other elements --> 
    <div id="divWithHugeAmountsOfChildDiv"> 
    <!-- lots of different type of elements --> 
    <div class="childCLASSEStoMouseDown">Booya?</div> 
    <!-- lots of different type of elements --> 
    </div> 
    <!-- lots of other elements --> 
</body> 

...

なぜ非常によくOn方法のためのjQueryのドキュメントで説明されています。

+0

おかげで、私はすでにjQuery.onを()を使用していますが、このように取り扱う委任イベントでそれを使用することを考えていませんでした! – Adam

2

多くの子divでjQueryの.on()で委任されたイベント処理を使用する必要があります。これは、子供の4000イベントハンドラではなく、親イベントハンドラを1つ提供します。また、インストールして初期化するほうがはるかに高速です。

.on()の委任フォームを使用している場合は、e.targetを自分でチェックする必要はありません.jQueryがそれを行います。 jQuery doc for .on()

$('parentSelector').on('mousedown', 'child selector', function(e) { 
    // code here 
    // "this" will be the object that initiated the event 
}); 

さらに詳しい情報:

このように.on()を使用するための構文は次のようです。

4

jQueryの.on()を使用すると、すでにそれが実行されます。イベントハンドラを特定の親にバインドし、子イベントを検出します。それは.live().bind()以上のパフォーマンス上のメリットだけでなく、.click()のような直接的なイベントバインドを持っており、その上ので:

  • で、documentにイベントをバインドし.live().on()とは異なり、あなたはどのような親を担当しています縛る

  • .live()は、文書のルートであるdocumentにバインドされています。バブルアップするイベントはさらに遠くに行きます。 .on()を指定すると、そのイベントをバインドする最も近い共通の親を見つけることができます。バブルが少ない旅する - パフォーマンス上の利点.on()

  • 、あなただけの要素ごとにイベントをバインド.bind()と直接イベントバインディングとは異なり、親に1つのハンドラをバインド - 要素の多くのためによくありません。

  • .on()は覚えやすいです。

  • .on()の中にターゲットを得るとき、 "this"は常にターゲット要素です。クロスブラウザの目標まで心配することはありません。 jQueryがそれを行います。

ので、「これは」このコードで:

$(element).on('click','someElement',function(){ 
    //the value of "this" in here is the DOM element target of the event 
}); 
関連する問題