当我们想要引用整个页面时,我注意到使用$(document)和$(‘body’),特别是在绑定事件时.
$(document).on('click','.myElement',function);
和
$('body').on('click',function);
性能有什么不同？如果$(document)将事件绑定到整个HTML文档,为什么我们不使用$(‘body’)来绑定类似click的事件？
注意这个问题不是指使用ready函数,而是使用.on()或.delegate()绑定.
解决方法
What is the difference performance-wise?
几乎肯定没有,或更准确地说,没有什么可衡量的.理论上来说,$(‘body’)必须搜索DOM的body元素,但这将是非常快的.另外,由于身体是一个文件的小孩,它将在文件冒泡事件纳秒之前到达.
虽然有一些差异：
如果您在头文件中使用了$(‘body’),并没有延迟执行它(准备就绪等),$(‘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);因为如果点击是身体外,则不会通过.myElement …
对于全局处理程序,我使用$(document),从不$(‘body’)(或$(document.body)),但是这可能更多的是从习惯而不是原因.
