jQuery 事件处理 - 绑定到文档或“body”元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16029340/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery event handling - bind to document or 'body' element?
提问by Samuel Liew
I have noticed the use of $(document)and $('body')when we want to reference the entire page, especially when binding events.
我已经注意到使用$(document)和$('body')，当我们要参考整个页面，尤其是结合事件的时候。
$(document).on('click', '.myElement', function);
and
和
$('body').on('click', '.myElement', function);
What is the difference performance-wise? If $(document)binds the event to the entire HTML document, why do we not use $('body')to bind events like clickinstead?
性能方面有什么区别？如果$(document)将事件绑定到整个 HTML 文档，为什么我们不使用$('body')绑定事件click来代替呢？
Note that this question is not referring to the use of the ready function, but the use of .on()or .delegate()binding.
注意这个问题不是指ready函数的使用，而是指使用.on()或.delegate()绑定。
回答by T.J. Crowder
What is the difference performance-wise?
性能方面有什么区别？
Almost certainly none, or more accurately, nothing measurable. $('body')in theory has to search the DOM for the bodyelement, but that's going to be very fast. Also, since bodyis a child of document, it will be reached in the bubbling of the event nanoseconds before documentis.
几乎可以肯定没有，或者更准确地说，没有任何可衡量的。$('body')理论上必须在 DOM 中搜索body元素，但这会非常快。此外，由于body是 的子级document，它将在documentis之前的事件纳秒的冒泡中到达。
There are a couple of differences, though:
但是，有一些差异：
Ifyou used $('body')in a script in the headand didn't delay execution of it (ready, etc.), $('body')wouldn't find anything and wouldn't hook up any handlers. $(document), on the other hand, would.
如果您$('body')在 中的脚本中使用head并且没有延迟它的执行（ready等），则$('body')不会找到任何内容并且不会连接任何处理程序。$(document)，另一方面，会。
If the body of the document doesn't fill the viewport, then on at least some browsers, you'll get a click on documentbut not on body:
如果文档的正文没有填满视口，那么至少在某些浏览器上，您会点击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>Of course, that doesn't apply to your $('body').on('click', '.myElement', function);because if the click is outside body, it's not going to pass through a .myElement...
当然，这不适用于您的，$('body').on('click', '.myElement', function);因为如果点击在外body，它不会通过.myElement...
For global handlers, I use $(document), never $('body')(or $(document.body)), but that may well be more from habit than reason.
对于全局处理程序，我使用$(document), never $('body')（或$(document.body)），但这可能更多是出于习惯而不是原因。
回答by DiMono
$('body')targets the <body>html element, while $(document)targets the entire html document. That means if you want to reference something in the <head>element you'll want to get there from $(document)because that's a direct path.
$('body')以<body>html 元素为$(document)目标，而以整个 html 文档为目标。这意味着如果您想引用<head>元素中的某些内容，您将希望从中获得，$(document)因为这是一条直接路径。
For your purposes, based on what you've shown us, they should be equivalent.
为了您的目的，根据您向我们展示的内容，它们应该是等效的。
回答by Cory Danielson
Bodyis a child of document. Because of this, events will first reach the bodybefore they are bubbled up to the document.
example: http://jsfiddle.net/CoryDanielson/JhH9V/
Body是 的孩子document。因此，事件将首先到达 ，body然后才会冒泡到document.
示例：http: //jsfiddle.net/CoryDanielson/JhH9V/
回答by akash4eva
It is definitely not the same because though when working with jQuery/JavaScript you are able to do your work done with both of them but however you cannot style document via css. Your body can have a specified height. Try adding a height of 200px to your body and a background-color of your choice (So, you can see the difference). Then add bindings to both the document and the body (different actions for both the events).
这绝对是不一样的，因为虽然在使用 jQuery/JavaScript 时你可以用它们完成你的工作，但是你不能通过 css 样式化文档。您的身体可以具有指定的高度。尝试为您的身体添加 200 像素的高度和您选择的背景颜色（因此，您可以看到差异）。然后将绑定添加到文档和正文（两个事件的不同操作）。
This experiment might work out for you.
这个实验可能对你有用。
回答by Imtiaz Zaman Nishith
'document' keyword is just a handle on the object that contains the whole HTML Document. On the other hand In jQuery, $('body') contains the body portion the HTML document. But in reality, you won't notice a difference of behavior between them.
'document' 关键字只是包含整个 HTML 文档的对象的句柄。另一方面，在 jQuery 中，$('body') 包含 HTML 文档的正文部分。但实际上，您不会注意到它们之间的行为差异。
For any further information about several jQuery functions and their working procedure, visit: jQuery function
有关多个 jQuery 函数及其工作过程的更多信息，请访问：jQuery 函数
