10

jQuery のパフォーマンスに関するスタック オーバーフローの別の質問を読んで、要素を個別にバインドするのではなく、イベント委任を使用する価値があるポイントについて考え始めました。主にjQueryを考えていましたが、おそらくJavascript全般に当てはまるのではないでしょうか。

イベント委任には、次の 2 つの主な目的があります。

  1. DOM にまだ作成/挿入されていない要素に対してハンドラーが機能できるようにします。
  2. 複数の兄弟要素ではなく、共通の祖先要素に 1 つの関数をバインドする

私の質問は、これらの 2 番目についてです。一般的な答えはおそらく「正確な状況による」でしょうが、これをテストするための経験則またはベンチマークの方法があるのだろうか.

問題は、イベント委譲のパフォーマンス上の利点がパフォーマンス コストを上回るには、いくつの要素が必要かということです。

4

1 に答える 1

3

このHTML構造を想定すると：

<ul id="navUL">
    <li><a href="one.html">One</a></li>
    <li><a href="two.html">Two</a></li>
    <li><a href="three.html">Three</a></li>
</ul>

（私にとって）物事を片付けるためだけに.... jQueryのドキュメント（http://api.jquery.com/delegate/）によると、これは次のとおりです。 

$("#navUL").delegate("a", "click", function(){
    // anchor clicked
});

...これと同等です：

$("#navUL").each(function(){
    $("a", this).live("click", function(){
        // anchor clicked
    });
});

ただし、イベントの委任（私が知っているように）は次のとおりです。 

$("#navUL").click(function(e) {
    if (e.target.nodeName !== "A") { return false; }
    // anchor clicked
    // anchor is referenced by e.target
});

したがって、UL要素のクリックイベントをキャッチし、event.targetプロパティを介して実際にクリックされたアンカーを特定します。

デリゲート（）メソッドについてはわかりませんが、この最後の手法は、次のように、＃navUL要素の各アンカーにイベントハンドラーをアタッチするよりも常に高速である必要があります。

$("#navUL a").click(function() {
    // anchor clicked
    // anchor is referenced by the this value
});
于 2010-10-15T23:09:30.743 に答える