Question

当我们想要引用整个页面时，我注意到$(document)和$('body')的使用，特别是在绑定事件时。

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

和

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

表现有什么不同？如果$(document)将事件绑定到整个HTML文档，为什么我们不使用$('body')来绑定click之类的事件？

请注意，这个问题并不是指使用ready函数，而是使用.on()或.delegate()绑定。

Answer 1

表现有什么不同？

几乎肯定没有，或者更准确地说，没有任何可衡量的。理论上$('body')必须在DOM中搜索body元素，但这会非常快。此外，由于body是document的子项，因此会在document之前的纳秒内冒泡到达。

但有几点不同：

如果您在$('body')的脚本中使用head并且没有延迟执行它（ready等），{{1找不到任何东西，也不会挂钩任何处理程序。另一方面，$('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)（或$('body')），但这可能更多来自习惯而非理性。

Answer 2

$('body')定位<body> html元素，而$(document)定位整个html文档。这意味着如果您想引用<head>元素中的某些内容，您需要从$(document)引用该内容，因为这是一条直接路径。

出于您的目的，根据您向我们展示的内容，它们应该是等效的。

Answer 3

Body是document的孩子。因此，事件会在冒泡到body之前首先到达document。
例如：http://jsfiddle.net/CoryDanielson/JhH9V/

Answer 4

它绝对不一样，因为虽然使用jQuery / JavaScript时你可以用它们完成你的工作，但是你不能通过css设置文档样式。你的身体可以有一个指定的高度。尝试为您的身体添加200px的高度和您选择的背景颜色（因此，您可以看到差异）。然后将绑定添加到文档和正文（两个事件的不同操作）。

这个实验可能适合你。

Answer 5

'document'关键字只是包含整个HTML文档的对象的句柄。另一方面在jQuery中，$（'body'）包含HTML文档的正文部分。但实际上，你不会注意到它们之间的行为差异。

有关几个jQuery函数及其工作过程的任何进一步信息，请访问：jQuery function

jQuery事件处理 - 绑定到文档或'body'元素？

5 个答案: