0

Facebook や Google+ と同じように、ウェブサイトに更新のフィードがあります。さらに、ページが下にスクロールされると、ますます多くの更新が下部に読み込まれます (スクロールバーがページの下部に達すると +20)。
各更新プログラムは、内部に多くのリンクが含まれる独立したボックスです。「クリック」イベントを、各ボックス内のこれらすべてのリンクと新しい出現にもバインドする必要があります。

パフォーマンスの観点から見て、どちらが安価ですか?

  1. 各ボックス内のすべてのリンクにイベントをバインドするには:

    $(box).find('.link1').on('click', …);
$(box).find('.link2').on('click', …);
…

  2. ボックス自体 (またはフィード ラッパー) にイベントをバインドし、クリックされたターゲットに基づいて必要な関数を実行する、クリックされたターゲット要素をトラックします。

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

  if (target.is('.link1')) …
  if (target.is('.link2')) …
});

Facebook/Google+ はどのようにそれを行うのですか? イベントを単一のリンクにバインドするか、イベントをボックス全体にバインドしてから、ターゲットに応じて委任しますか?

現在、必要なすべての DOM オブジェクトにイベントがバインドされるようにするには、ブラウザーが大量のメモリを必要とするように感じます。特に、200 以上の更新があるほど下にスクロールする場合はそうです。

4

1 に答える 1

0

これは、イベント委任の主なケースです。

$('someContainer').on('click', 'a', function(e) {
    //'this' is the event target
});

のドキュメントon()、特に「直接および委任されたイベント」に関する部分を参照してください。

于 2013-08-28T15:05:14.980 に答える