8

要素のイベントをリッスンするには、ドキュメント レベルでリッスンすると思います。

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

要素レベルでリッスンするスタイルよりも優れています:

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

その理由は、最初のスタイルが動的に追加された新しい要素にも適用される可能性があるためです。Bootstrap でこのスタイルがよく使われていることも確認できます: https://github.com/twitter/bootstrap/blob/master/js/bootstrap-alert.js

最初のスタイルを多用したいと思います。しかし、このスタイルの欠点、つまりパフォーマンスなどはあるのでしょうか?

4

3 に答える 3

17

ここで入手可能なjQueryドキュメントから：

イベントパフォーマンス

ほとんどの場合、 のようなイベントclickはまれにしか発生せず、パフォーマンスは重要な問題ではありません。ただし、mousemoveやなどの頻度の高いイベントscrollは 1 秒間に数十回発生する可能性があり、そのような場合は、イベントを慎重に使用することがより重要になります。ハンドラー自体で行われる作業の量を減らすか、ハンドラーが必要とする情報を再計算するのではなくキャッシュするか、setTimeout.

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

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

于 2013-05-05T11:01:55.310 に答える
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*/});

Api ドキュメントを参照してください - http://api.jquery.com/on/

于 2013-05-05T10:53:41.347 に答える