なぜjqueryでドキュメントにイベントを登録するのが悪い習慣ですか？

Question

jqueryでイベント登録について読むたびに、イベントハンドラを最寄りの親に追加し、イベントリスナをドキュメントに追加しないようにする必要があると言われています。

しかし、なぜ彼らは遅いですか？明らかに、それはイベントが文書にバブルする必要があり、時間がかかるからです。次に、コールするセレクタのリストと比較されます。私は要素をクリックするのであれば、ここで

$(document).on("click", ".abc", function(){ }) 
$(document).on("click", ".abc2", function(){ }) 

、クリックイベントは、文書までバブルとなり、それがセレクタリスト（」.abc、.abc2" ）を一致します...それは非効率的です。私はそれを持っていますが、リストにセレクタが1つだけあればどうですか？例えば

$(document).on("click", "*", function(){ }) 

遅くなるでしょうか？もしそうなら、なぜですか？

基本的に私はlibにsimiler Googleのjsactionを作成しようとしているので、私はこのように書きます： - これが唯一の選択になりますので

$(document).on("click", "[jsaction]", function(){ }) 

ので、私はそれが遅くなることはないと思います？それともそれは？

文書にイベントを添付するのが効率的でない場合、完全にajaxアプリケーションはどうでしょうか？私のアプリケーションは完全にajaxであり、すべてのページはajaxによってダウンロードされます。別の、より効率的なソリューションがありますか？

Answer 1

イベントの代表団は、基本的にあなたが イベントは、関連するイベントを発生する文書にバブルアップされることを要素の上にクリックしたときに、例えば、をバブリングイベント

1. 、2つの異なるプロセスを使用しています。イベントバブリングを引き起こし 仲間が文書を添付し セレクタを用いて検証されます（イベントバブリングの間に）文書に到達した後
2. 試合、。一致する場合は、該当する イベントが発生します。

したがって、の一致については、ジェネリックセレクタを記載してください。率直であるために、2つまたは3つの要素を一致させることは、イベントバブリング中に文書まで移動するよりも時間がかかりません。その場合、documentの代わりに静的な最も近い親を使用すると、移動時間が短縮され、パフォーマンスが向上します。

マッチに時間がかかりませんが、マッチングに15以上の要素が含まれている場合は、documentの代わりに親の親を使用してもパフォーマンスに影響します。

要約すると、上記の2つの異なるプロセスがボンネットの下で行われていることを知ることで、イベントの委任を控えめに使用する必要があります。