W3C HTML5标准阅读笔记 – body元素

标准原文:http://www.w3.org/TR/html5/sections.html#the-body-element

body元素作为html元素的第二个子元素,用于包含整个文档的内容。在合法的HTML文档中,只允许出现一个body元素。在JavaScript脚本中,可以通过document.body来直接获取。

除了通用的全局属性,body元素还拥有一些特有的事件监听属性,通过使用这些事件监听器,可以满足一些业务需求、实现一些漂亮的页面效果。这些特有的事件监听属性有:onafterprint, onbeforeprint, onbeforeunload,onhaschange, onmessage, onoffline, ononline, onpagehide, onpageshow, onpopstate, onstorage, onunload

值得注意的是,在body标签上挂载的所有事件监听器,其监听的对象并非body,而是window(整个窗口) -- window对象本身在HTML文档中是没有任何对应的标签的,因此HTML5标准规定如果想要往window上添加事件监听器的话,可以把这些事件监听器挂载在body标签上;如果确实想要把事件监听器挂载在body对象上的话,可以在页面的JavaScript脚本中通过addEventListener语句来实现(比如,用document.body.addEventListener(…))。至于为什么body和window的事件监听要设计成这样,我个人的猜测是:在window对象上挂载事件监听的需求远远大于在body对象上的相应需求,因此为了编码的便捷性(至少在早期的Web开发中是这样),直接在HTML文件中定义window的事件监听显然是一个更好的选择。

比如,HTML文档中body的某个子元素触发了error事件,此时事件冒泡的顺序是这样的:子元素 - body – html – document – window,因此如果在html标签上挂载了error事件监听函数A,在body标签上也挂载了error事件监听函数B,那么尽管body是html的子元素,B函数还是在A函数之后执行的。

Chuan Shao

Read more posts by this author.

Shanghai

Subscribe to Chuan's blog

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!