前端学堂
学有所用

DOMContentLoaded与load什么区别

面试笔试题目分类: JavaScriptDOMContentLoaded与load什么区别
0
前端学堂 管理员 asked 7 months ago
window.onload=function(){ alert(3) }
window.onload=function(){ alert(4) }
window.addEventListener('load', () => {
alert(1)
})
window.addEventListener('load', () => {
alert(2)
})

document.addEventListener(‘DOMContentLoaded’, () => {
alert(7)
})
window.addEventListener(‘DOMContentLoaded’, () => {
alert(6)
})
document.addEventListener(‘DOMContentLoaded’, () => {
alert(5)
})

需要了解的是window上有DOMContentLoaded事件,事件的original target 是已经加载的document。参考:https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event

Bubbles
Yes

Cancelable
Yes (although specified as a simple event that isn’t cancelable)

Interface
Event

Event handler property
None

document的DOMContentLoaded事件https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event
HTML document加载解析了之后,不等stylesheets, images, and subframes 加载完就会触发。

Bubbles
Yes

Cancelable
Yes (although specified as a simple event that isn’t cancelable)

Interface
Event

Event handler property

先触发dom监听的DOMContentLoaded事件,然后触发window绑定的DOMContentLoaded事件,最后触发onload事件。按绑定事件的先后顺序依次触发,

Your Answer

 

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏