3

大量の子 div (約 4k-5k!) を持つ div があります。各子には'mousedown'and'mouseup'イベントが関連付けられています。

代わりに、これらのイベントを一度親にアタッチし、を使用して子を選択する必要があります$(e.target)か? パフォーマンス上の利点はありますか?もしそうなら、その理由は?

ありがとう！

4

3 に答える 3

6

jquery.on()を使用するのが理想的だと思います。

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

HTML は次のようになります。

<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>

必要に応じて jQuery セレクターを変更します...

その理由は、Onメソッドの jQuery ドキュメントで非常によく説明されています。

于 2012-04-04T22:21:29.097 に答える
4

jQuery を使用すると、.on()すでにそれが行われています。イベント ハンドラーを特定の親にバインドし、子イベントを検出します。次の理由により、直接イベントバインドなどと.live()同様.bind()にパフォーマンス上の利点があります。.click()

  • .live()イベントを にバインドするとは異なり、 documentwith では.on()、バインドする親を担当します。

  • .live()documentドキュメントのルートにバインドされます。バブルアップしたイベントはさらに先へ進みます。を使用すると.on()、そのイベントをバインドする最も近い共通の親を見つけることができます。泡の移動が少なくなり、パフォーマンスが向上します

  • を使用すると、要素ごとにイベントをバインドする直接イベント バインディング.on()とは異なり、1 つのハンドラーのみを親にバインドします。多くの要素には適していません。.bind()

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

  • ターゲットを取得するとき、内部.on()では常に「this」がターゲット要素です。クロスブラウザーでもターゲットについて心配する必要はありません。jQuery がそれを行います。

したがって、このコードの「これ」：

$(element).on('click','someElement',function(){
    //the value of "this" in here is the DOM element target of the event
});
于 2012-04-04T22:27:48.140 に答える
2

多くの子 div があるため、jQuery の.on(). これにより、子の 4000 個のイベント ハンドラーではなく、親の 1 つのイベント ハンドラーが提供されます。また、インストールと初期化がはるかに高速になります。

の委任形式を使用する場合は、jQuery が自動的にチェックするので、自分で.on()チェックする必要はありません。e.target

この方法で使用するための構文.on()は次のようになります。

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

詳細については、jQuery doc を.on()参照してください。

于 2012-04-04T22:24:57.197 に答える