window.onload与document.onload
哪种支持更广泛?window.onload "还是 "document.onload"?
647
8
哪种支持更广泛?window.onload "还是 "document.onload"?
他们什么时候开火?
window.onload
在某些浏览器中,它现在取代了
document.onload
的作用,并在DOM准备好时启动。document.onload
它们的支持情况如何?
window.onload似乎是得到最广泛支持的。事实上,一些最新的浏览器在某种意义上已经用
window.onload
取代了document.onload
。浏览器的支持问题很可能是许多人开始使用jQuery等库来处理文档准备就绪的检查的原因,比如说。
就历史而言。
window.onload
与body.onload
。一般来说,window.onload在文档的窗口准备好展示时,document.onload在DOM树(由文档中的标记代码构建)完成时。
理想情况下,订阅DOM树事件,可以通过Javascript进行离屏操作,招致几乎没有CPU负载。 相反,`
window.onload
在多个外部资源尚未被请求、解析和加载的情况下,可能会花一段时间来启动。►测试场景:
要观察两者之间的差异以及您所选择的浏览器如何实现上述事件处理程序,只需在您的文档's -
lt;body>
- 标签中插入以下代码。►结果:
以下是Chrome v20(可能还有大多数当前的浏览器)的行为。
document.onload
事件。onload`````在
lt;body>里面声明两次,在```lt;head>
里面声明一次(这里的事件就像```document.onload````)。lt;head>
元素的范围内声明window.onload
事件处理程序。►示例项目:。
以上代码取自[本项目's][2]代码库(
index.html
和keyboarder.js
)。关于[窗口对象的事件处理程序][3]的列表,请参考MDN文档。
1:
[2]: https://github.com/lsauer/KeyBoarder/tree/gh-pages [3]: https://developer.mozilla.org/en-US/docs/DOM/window#Event_handlers
添加事件监听器
#"2017年3月更新"。 ## 1香草JavaScript
## 2 jQuery
<hr>。 好运。
根据[解析HTML文档--结束][1]。
浏览器解析HTML源并运行延迟脚本。
当所有的HTML都被解析并运行后,在 "document "处会派发一个 "DOMContentLoaded "事件。 该事件冒泡到
window
。浏览器加载资源(如图片),延迟加载事件。
在
window
处派发一个load
事件。因此,执行顺序将是
document
的DOMContentLoaded
事件监听器。window
的DOMContentLoaded
事件监听器在气泡阶段。"window "的 "load "事件监听器(包括 "onload "事件处理)。
"document "中的气泡 "load "事件监听器(包括 "onload "事件处理程序)绝对不能被调用,只有捕获 "load "监听器可能会被调用,但是是由于像样式表这样的子资源的加载,而不是由于文档本身的加载。
<!--开始片段。 js hide: false console: true babel.false --> -- begin snippet: js hide: false console: true false -->
[1]: https://www.w3.org/TR/html5/syntax.html#the-end
在Chrome浏览器中,window.onload与
<body onload="">
不同,而在Firefox(35.0版)和IE(11版)中它们是一样的。你可以通过下面的代码段来探讨这个问题。
你会在 Chrome 控制台中看到 "window loaded"(先出现的) 和 "body onload" 和"body onload"。 然而,在Firefox和IE中,你将只看到"body onload" 在Firefox和IE中,你会看到只有"body onload"。 如果你在IE的控制台中运行"
window.onload.toString()
" 在IE的控制台中运行& FF,你会看到。这意味着赋值"window.onload = function(e)..." 被覆盖。
window.onload
和onunload
是document.body.onload
和document.body.onunload
的快捷方式。document.onload
和onload
处理程序在所有html标签上似乎是保留的,但从未被触发过。'
onload
' in document -> true然而,它们往往是同一件事。 同样,body.onload在IE中成为window.onload。
然而,Window.onload是标准,PS3中的网络浏览器(基于Netfront)不支持window对象,所以你不能在那里使用它。