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

时间:2013-04-16 05:21:17

标签: jquery

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

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

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

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

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

5 个答案:

答案 0 :(得分:26)

  

表现有什么不同?

几乎肯定没有,或者更准确地说,没有任何可衡量的。理论上$('body')必须在DOM中搜索body元素,但这会非常快。此外,由于bodydocument的子项,因此会在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')),但这可能更多来自习惯而非理性。

答案 1 :(得分:2)

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

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

答案 2 :(得分:2)

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

答案 3 :(得分:1)

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

这个实验可能适合你。

答案 4 :(得分:1)

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

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