javascriptのイベントバインディングのパフォーマンスが巨大なリスト

Question

最近、10K +アイテムのページで質問されましたが、各アイテムのクリックイベントをどのように聞くのですか？私はそれぞれのアイテムにクリックをバインドするだけだと言いましたが、彼の顔を見ると、彼が探していた答えではないことが分かりました。このタイプのユースケースに関するオンライン記事を見つけるのは苦労している。だから私はこれを頼んでいないのだ。解決策を説明するのに役立つサンプルコードを回答に付けることができれば助かります。

Answer 1

あなたがこれを行うには、イベントの委任を使用することができます...

var handleClick = function(e) { 
    // Older IEs set the `event` globally. 
    e = window.event || e; 

    // Older IEs use `srcElement` instead of the spec'd `target`. 
    var target = e.target || e.srcElement; 

    // For example's sake. 
    if (target.tagName.toLowerCase() == 'a' && target.className == 'some_class') { 
     // Handle this click. 
    } 

} 

if (document.addEventListener) { 
    document.addEventListener('click', handleClick, false); 
} else (document.attachEvent) { 
    // Older IEs use `attachEvent` instead for adding event listeners. 
    document.attachEvent('onclick', handleClick); 
} else { 
    // When all else fails, let's take a journey back to the 90's. 
    document.onclick = handleClick; 
} 

イベントの代表団は、デフォルトですべての祖先要素を通じてバブルアップイベントをキャプチャすることによって動作します。

documentは、最も近い一貫した祖先要素で置き換えることができます（そして、そうする必要があります）。

上記のコード例は、気になるブラウザをすべてサポートしています。

などのjQueryなどのライブラリを使用して、コードは一般的に、より簡潔であれば...

$(document).on('click', 'a.some_class', function() { 
    // Handle this click. 
}); 

Answer 2

あなたはアイテムのコンテナ、イベント委任と呼ばれる技術を単一のリスナーをバインドする必要があります。これは、javascriptのイベントですべてのノードの親をルートノードにバブルアップするために機能します。あなたがイベントをキャッチするときは、あなたが聞きたいノードタイプの1つにクリックがあることを確認するために、すばやくチェックする必要があります。