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事件。按绑定事件的先后顺序依次触发,