window.onload=function(){
console.log(111)
}
window.onload=function(){
console.log(222)
}
$(document).ready(function(){
console.log(333)
})
$(document).ready(function(){
console.log(444)
})
//33,44,22
区别点:
一:dom级事件不同
window.onload:属于dom0级事件的方式实现,dom0级事件不能同时绑定多个相同的事件,比如onclick,onload等;会被覆盖,只执行最后一个的函数;所以这里console.log(111)才没出现
而$(document).ready jquery源码里使用的是document.addEventListener( “DOMContentLoaded”, completed );
addEventListener属于dom2级事件,所以 则不会被替换掉,原因是因为dom2级事件可以绑定多次
所以如果想使用onload,可以使用addEventListener
window.addEventListener('load',function(){
console.log(555)
})
二:执行顺序的不同
$(document).ready的DOMContentLoaded,表示文档结构加载完成(不包含图片等非文字媒体文件)就触发;
举例:img 这个dom元素加载出來即可
onload,指示页面包含图片等文件在内的所有元素都加载完成。
举例:img 要等到src加载出來才行
<img src='' alt=''/>