23

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

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

和

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

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

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

4

5 回答 5

31

性能方面的区别是什么？

几乎可以肯定没有，或者更准确地说，没有可测量的。$('body')理论上必须在 DOM 中搜索body元素，但这会非常快。此外，由于bodyis 的子级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 回答
2

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

于 2013-04-16T05:39:48.963 回答
1

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

这个实验可能对你有用。

于 2013-04-16T05:26:28.930 回答
1

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

有关几个 jQuery 函数及其工作过程的更多信息，请访问：jQuery 函数

于 2013-04-16T05:33:44.307 回答