javascript - 数百の DOM 要素に対する JavaScript イベント リスナーのパフォーマンス

Question

<ul>多くの子 (3000 アイテム近く) を持つ があり、いくつかの には<li>多くのレベルがあります。の子の可視性を切り替えるために使用する「クリック」にイベントリスナーをアタッチしました（私はjQueryを使用しています）<li>。

非常に多くのイベント リスナーがパフォーマンスにどのような影響を与えるのか疑問に思っています。(少なくとも 1000 あります!)。これはパフォーマンスにとって大きな問題ですか？

新しい Web ブラウザでは、パフォーマンスに関する問題はあまり見られませんが、IE8 は非常に遅いようです。すべてにイベント リスナーをぶつけるのは、非常に無責任なことですか?!

Answer 1

答えは、大声でYESです。はい、パフォーマンスに影響します。イベント委任は、まさにこの目的のために構築されました。ハンドラーをすべてのシングルliにバインドする代わりに、その親である にバインドしulます。このようにして、はイベントを にul委譲します。clickli

$("ul").on("click", "li", function () {
 //your code
});