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

Question

我已经注意到使用$(document)和$('body'),当我们要参考整个页面,尤其是结合事件的时候.

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

和

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

性能方面有什么不同？如果$(document)将事件绑定到整个HTML文档,为什么我们不使用$('body')绑定事件click呢？

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

Answer 1

性能方面有什么不同？

几乎可以肯定没有,或者更准确地说,没有任何可衡量的东西.$('body')理论上必须在DOM中搜索body元素,但这将非常快.此外,由于它body是一个孩子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),从不$('body')(或$(document.body)),但这可能更多来自习惯而非理性.