jQueryのドキュメントレベルでイベントを聴くのに欠点はありますか？

Question

は、要素のイベントを聞くには、私は、ドキュメントレベルで待機するようにと思う：

$('.myclass').on('click', function() { /*do something*/ }); 

理由は、最初のスタイルを適用できます：

$(document).on('click', '.myclass', function() {/*do something*/}); 

は、要素レベルで待機するようにスタイルよりも優れています新しい要素も動的に追加されました。また、このスタイルはブートストラップで多く使われています。https://github.com/twitter/bootstrap/blob/master/js/bootstrap-alert.js

私は最初のスタイルを広範囲に使いたいと思います。しかし、私はこのスタイルの欠点、パフォーマンスなどがあるのだろうか？ （あなたが広範囲に最初のスタイルを使用したいと） -

Answer 1

here利用できるjQueryのドキュメントから：

イベントパフォーマンス

ほとんどの場合、このようなclickなどのイベントはまれにしか発生し、パフォーマンスではありません重大な懸念である。しかし、mousemoveやscrollなどの頻度の高いイベントは1秒間に数十回発火する可能性があり、そのような場合はイベントを慎重に使用することが重要になります。パフォーマンスは、ハンドラ自体で行われる作業量を減らしたり、ハンドラが再計算するのではなくハンドラが必要とする情報をキャッシュしたり、setTimeoutを使用して実際のページ更新数をレート制限したりすることで向上させることができます。

多くの委任されたイベントハンドラをドキュメントツリーの上部に付けると、パフォーマンスが低下する可能性があります。イベントが発生するたびに、jQueryは、そのタイプのすべてのアタッチされたイベントのすべてのセレクタを、イベントターゲットからドキュメントの先頭までのパスのすべての要素と比較する必要があります。最高のパフォーマンスを得るには、委任されたイベントをターゲット要素に可能な限り近いドキュメントの場所にアタッチします。大きなドキュメントで委任されたイベントに対してdocumentまたはdocument.bodyを過度に使用しないでください。

jQueryは、デリゲートされたイベントをフィルタリングするために使用されると、フォームtag#id.classのシンプルなセレクタを非常に迅速に処理できます。したがって、"#myForm","a.external"、および"button"はすべて高速セレクタです。より複雑なセレクタ、特に階層的なセレクタを使用する委任されたイベントは、数回遅くなることがありますが、ほとんどのアプリケーションではまだ十分に速いです。階層セレクタは、ドキュメント内のより適切なポイントにハンドラを追加するだけで回避できます。たとえば、$("body").on("click", "#commentForm .addNew", addComment)の代わりに$("#commentForm").on("click", ".addNew", addComment)を使用します。

Answer 2

.myclassた場合は、文書に動的に追加され、これはあなたがこの検討し、それをより効率的にするために

$(document).on('click', '.myclass', function() {/*do something*/});

を好むものです

<div class='parentClass'> 
    <div class='myclass'></div> // <-- added dynamically 
</div> 

あなたはこれを行うことができます -

$('.parentClass').on('click', '.myclass', function() {/*do something*/});

参照アピドキュメント - http://api.jquery.com/on/

Answer 3

クリックハンドラーを要素自体に直接追加することのもう1つの利点は、Androidはそれほど優れているようです。クリックハンドラを持つ要素に触れると、モバイルブラウザは、ハンドラが別の要素にアタッチされているときに何も実行されていないことを少しヒントします。

さらに安定しているようです。