当我们想要引用整个页面时,我注意到$(document)
和$('body')
的使用,特别是在绑定事件时。
$(document).on('click', '.myElement', function);
和
$('body').on('click', '.myElement', function);
表现有什么不同?如果$(document)
将事件绑定到整个HTML文档,为什么我们不使用$('body')
来绑定click
之类的事件?
请注意,这个问题并不是指使用ready函数,而是使用.on()
或.delegate()
绑定。
答案 0 :(得分:26)
表现有什么不同?
几乎肯定没有,或者更准确地说,没有任何可衡量的。理论上$('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')
),但这可能更多来自习惯而非理性。
答案 1 :(得分:2)
$('body')
定位<body>
html元素,而$(document)
定位整个html文档。这意味着如果您想引用<head>
元素中的某些内容,您需要从$(document)
引用该内容,因为这是一条直接路径。
出于您的目的,根据您向我们展示的内容,它们应该是等效的。
答案 2 :(得分:2)
Body
是document
的孩子。因此,事件会在冒泡到body
之前首先到达document
。
例如:http://jsfiddle.net/CoryDanielson/JhH9V/
答案 3 :(得分:1)
它绝对不一样,因为虽然使用jQuery / JavaScript时你可以用它们完成你的工作,但是你不能通过css设置文档样式。你的身体可以有一个指定的高度。尝试为您的身体添加200px的高度和您选择的背景颜色(因此,您可以看到差异)。然后将绑定添加到文档和正文(两个事件的不同操作)。
这个实验可能适合你。
答案 4 :(得分:1)
'document'关键字只是包含整个HTML文档的对象的句柄。另一方面在jQuery中,$('body')包含HTML文档的正文部分。但实际上,你不会注意到它们之间的行为差异。
有关几个jQuery函数及其工作过程的任何进一步信息,请访问:jQuery function