4

パフォーマンスによってjQueryの要素にイベントハンドラをアタッチする最良の方法は何ですか?

イベントハンドラーをアタッチしたいすべての要素は静的であり、生成および動的に作成された要素はありません。

<div class="foo"></div>
<div class="bar"></div>
<div class="qux"></div>

clickそれらすべてに個別にイベント ハンドラーをアタッチしたいのですが、3 つのオプションがあります。

I. イベントハンドラを直接アタッチする

この古典的な方法では、イベント ハンドラーを要素に直接アタッチします。

$('.foo').on('click', f);
$('.bar').on('click', g);
$('.qux').on('click', h);

Ⅱ．イベントハンドラーを親に複数回アタッチする

このメソッドでは、前のメソッドの代わりに、要素ごとにイベント ハンドラーを親に複数回アタッチします。

$('body').on('click', '.foo', f);
$('body').on('click', '.bar', g);
$('body').on('click', '.qux', h);

III. イベントハンドラーを親に一度だけアタッチする

この方法は、1 つの違いを除いて、前の方法と同じです。イベント ハンドラーを 1 回だけアタッチし、ハンドラー自体で必要なセレクターを確認します。

$('body').on('click', function (e) {
    var $elem = $(e.target);

         if ($elem.is('.foo')) { f(); }
    else if ($elem.is('.bar')) { g(); }
    else if ($elem.is('.qux')) { h(); }
});

どれが性能的に優れているか知りたいです。

4

3 に答える 3

0

他の答えに同意しないでください。

http://jsperf.com/test-so-1のテストでさえ、最後のオプションが最速であると言います。しかし、私はその理由を説明しようとすることができます.

この場合：

$('body').on('click', '.foo', f);

委任されたイベントをバインドするには、標準的な jquery の方法を使用します。イベントを にバインドし、セレクターbodyに対してチェックするよう jQuery に依頼します。.foo各イベントには、e.target実際にイベントを開始したプロパティがあります。しかし、イベントは DOM をバブルアップするので、.fooセレクターは の親の 1 つと一致しe.targetます。そのため、jQuery は追加のトラバースを行う必要があります。たとえば、すべての親を見つけて、セレクターe.targetに対してチェックします。.foo

直接チェックするのは 3D オプションのみe.targetです。

.fooセレクターが に近い場合body、パフォーマンスに大きな違いはありません。しかし、.fooセレクターが DOM ツリーの奥深くにある場合、jQuery は の多くの親をトラバースする必要がありe.targetます。

それを実証するテスト：

http://jsfiddle.net/xDyuJ/1/

http://jsfiddle.net/xDyuJ/2/

イベントの実行のみを測定していることがわかります。3D の場合は 2 倍以上高速です。ギャップは、DOM ツリー内の要素の位置に対して相対的に変化します。

于 2013-06-03T12:57:57.190 に答える
0

クリックイベントが発生するたびに要素のクラスをチェックするため、3番目のソリューションは間違いなく最悪のソリューションです。

ここでのボトルネックは jQuery セレクターの解析であるため、最初の解決策が最も効率的で読みやすいものです。

于 2013-06-03T12:18:51.300 に答える