jQuery 事件处理 - 绑定到文档或“正文”元素？答案

【问题标题】：jQuery event handling - bind to document or 'body' element?jQuery 事件处理 - 绑定到文档或“正文”元素？
【发布时间】：2013-04-08 09:40:42
【问题描述】：

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

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

和

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

在性能方面有什么区别？如果$(document)将事件绑定到整个HTML文档，为什么不使用$('body')来绑定click之类的事件呢？

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

【问题讨论】：

stackoverflow.com/questions/12307112/…
我已经看到了。这是一个稍微不同的问题
它们是不同的元素。你瞄准哪一个并不重要
见过有人写$('body').ready(...吗？我没有。
document 不包含除document.body 之外的任何其他可点击元素。除非用户点击了没有body 的地方，否则每次点击document 都是点击body。

标签： jquery

【解决方案1】：

$('body') 以<body> html 元素为目标，而$(document) 以整个 html 文档为目标。这意味着如果您想引用 <head> 元素中的某些内容，您将希望从 $(document) 到达那里，因为这是一条直接路径。

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

【讨论】：

【解决方案2】：

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

这个实验可能对你有用。

【讨论】：

【解决方案3】：

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

如需了解更多 jQuery 函数及其工作流程，请访问：jQuery function

【讨论】：

【解决方案4】：

Body 是 document 的子级。因此，事件将首先到达body，然后才会冒泡到document。
例如：http://jsfiddle.net/CoryDanielson/JhH9V/

【讨论】：

【解决方案5】：

在性能方面有什么区别？

几乎可以肯定没有，或者更准确地说，没有可测量的。 $('body') 理论上必须在 DOM 中搜索 body 元素，但这会非常快。此外，由于body 是document 的子级，因此它将在document 之前的事件冒泡中到达。

不过有几个不同之处：

如果您在head 的脚本中使用了$('body') 并且没有延迟执行它（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)，从不使用$('body')（或$(document.body)），但这可能更多是出于习惯而非原因。

【讨论】：