23

特にイベントをバインドするときに、ページ全体を参照したいときに$(document)andを使用していることに気付きました。$('body')

$(document).on('click', '.myElement', function);

と

$('body').on('click', '.myElement', function);

パフォーマンスの違いは何ですか？イベントを HTML ドキュメント全体にバインドする場合、代わりにイベントをバインドするために$(document)使用しないのはなぜですか?$('body')click

この質問は、ready 関数の使用についてではなく、.on()または.delegate()バインディングの使用について言及していることに注意してください。

4

5 に答える 5

31

パフォーマンスの違いは何ですか？

ほぼ確実にゼロ、より正確には、測定可能なものは何もありません。$('body')理論的には要素を DOM で検索する必要がありますがbody、これは非常に高速です。また、bodyは の子であるdocumentため、イベントのバブリングで ナノ秒前に到達しdocumentます。

ただし、いくつかの違いがあります。

$('body')のスクリプトで使用し、そのhead実行を遅らせなかった場合 (などready)、$('body')何も検出されず、ハンドラも接続されません。$(document)、一方、でしょう。

ドキュメントの本文がビューポートを埋めていない場合、少なくとも一部のブラウザでは、 はクリックされますが、 はクリックされdocumentませんbody。

$(document).on("click", function() {
  $("<p>document</p>").appendTo(document.body);
});
$('body').on("click", function() {
  $("<p>body</p>").appendTo(document.body);
});
body {
  border-bottom: 1px solid #060;
}
<p>The line marks the bottom of <code>body</code>. Click above and below the line to see where the click was caught. (Note the line will move as we append to <code>body</code>.)</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

もちろん、それはあなたには当てはまりません。$('body').on('click', '.myElement', function);クリックが外部にある場合、それは...bodyを通過しないからです.myElement

グローバル ハンドラーの場合、私は$(document), never $('body')(または$(document.body)) を使用しますが、これは理由というより習慣によるものかもしれません。

于 2015-08-19T17:20:33.147 に答える
3

$('body')は<body>html 要素を$(document)ターゲットにしますが、html ドキュメント全体をターゲットにします。つまり、<head>要素内の何かを参照したい場合は、そこから取得したいと思うでしょう$(document)。それは直接パスだからです。

あなたの目的のために、あなたが私たちに示したものに基づいて、それらは同等である必要があります.

于 2013-04-16T05:24:18.303 に答える
1

jQuery/JavaScript を使用する場合、両方を使用して作業を行うことはできますが、css を介してドキュメントのスタイルを設定することはできません。体の高さを指定できます。ボディに 200px の高さを追加し、選択した背景色を追加してみてください (違いがわかります)。次に、ドキュメントと本文の両方にバインドを追加します (両方のイベントに対して異なるアクション)。

この実験はうまくいくかもしれません。

于 2013-04-16T05:26:28.930 に答える
1

'document' キーワードは、HTML ドキュメント全体を含むオブジェクトの単なるハンドルです。一方、jQuery では、$('body') に HTML ドキュメントのボディ部分が含まれます。しかし実際には、それらの動作の違いに気付くことはありません。

いくつかの jQuery 関数とその作業手順の詳細については、jQuery 関数を参照してください。

于 2013-04-16T05:33:44.307 に答える