3

イベントをぶら下げるための最も生産的な方法を見つけようとしています。

この構造があると想像してみましょう:

<ul>
    <li> 1st li </li>
    ...
    <li> 99999th li </li>
<ul>

したがって、約 10000 個の li 要素があり、このすべての要素にイベント リスナーを追加したいと考えています。たとえば、jQuery も使用できるとします。

最初に考えた

<li onclick="console.log(this)" >...</li>

このソリューションの悪い点 - 常に onlick を繰り返すため、html マークアップのサイズを大きくしました。

再考

$('ul li').on('click', function(){ 
    console.log(this)
})

もちろん、10000 個のイベント リスナーを追加するため、このソリューションはオプションではありません。明らかにパフォーマンスが良くありません。

第三の考え、イベント委任

$('ul').on('click', 'li', function(){
    console.log(this)
})

私にとっては非常に良さそうです。使用するイベント リスナーは 1 つだけであり、破棄された html マークアップではなく、必要に応じて機能します。

ですから、私はこの質問をします。なぜなら、私は時々、さまざまなサイトのソースを見て、それらの大部分が最初の方法で使用されているからです。なんで？最初の方法にはいくつかの利点がありますか？

ページに動的に追加された要素をキャッチする方が簡単だからだと思いますが、私が知らない何かがあるのでしょうか?

4

2 に答える 2

5

ここで答えを見つけることができます- jQuery.click() vs onClick、http://jsperf.com/testper
テスト を見るとわかるよう に、イベント委任アプローチはイベントハングの最良のアプローチです.10000以上ある場合イベントよりも確実に3 番目のアプローチが最適です。

于 2013-06-22T21:42:37.610 に答える