DOMContentLoaded与load什么区别

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