5

マークアップが次のようになっている場合:

<button id="button-1" class="nice">
<button id="button-2" class="nice">
<button id="button-3" class="nice">

そして、次の jQuery を定義します。

$(".nice").click(function () { 
    // something happens
});

  1. いくつのイベントリスナーが確立されていますか? 1または3？

  2. 3 つではなく 1000 個のボタンがある場合、代わりにイベント委任を使用する必要がありますか?

  3. それらのクラスがマークアップに多数の要素を含んでいる場合、要素のクラスで jQuery 呼び出しを定義しないのは、パフォーマンスの観点から最善ですか?

4

4 に答える 4

6

1) 3 つのイベント リスナーがすべて同じ関数を指している。

2）それはあなたが達成しようとしていることに依存します

3) いくつかのベンチマークを実行してみて、パフォーマンスの低下が顕著になる場所を確認します。最大 1000 個の要素を選択して同時にアニメーション化しましたが、(FF では) 約 600 ～ 700 個の要素までパフォーマンスへの影響は目立ちませんでした。もちろん、パフォーマンスはブラウザと JS エンジンに依存します。一部 (Chrome) は他のもの (IE) よりも高速です。そのサイトでは、質問と同じ方法を使用したことに言及する価値があります。

于 2009-07-20T04:06:41.980 に答える
3

1) 3

2) はい

3）はい、あなたが言ったように、jQueryで.live関数を介して利用できるイベント委任を使用してください。あまりにも多くの .live 関数もパフォーマンスに影響を与える可能性があるため、ネイティブ イベント委任を検討してください。

于 2009-07-20T04:56:05.330 に答える
1
  1. はい、関数$()は配列を返し、そのclick()中のすべての要素に適用されるためです。
  2. はい。通常、委任は、イベントをトリガーできるノードが多数ある場合、またはそれらのノードの量が変化する可能性がある場合に最も効果的です。これにより、DOM に何が起こっても、イベント リスナーを 1 回初期化するだけで済みます。100 を超えるノードを計画している場合は、イベント処理よりもイベント委任を使用します。
  3. はい。これにより、応答時間が改善され (特に非常に大きなリストの場合 [ベンチマークを実行してください])、初期化が O(n) ではなく O(1) になります。
于 2009-07-20T09:08:54.883 に答える
0

完全同意！これらすべての優れた要素を含む親要素にイベント リスナーを追加する必要があります。これにより、パフォーマンスが大幅に向上します。

于 2009-07-20T04:58:50.877 に答える