window对象常见事件

window对象常见事件

窗口加载事件

window.onload=function(){}
或者
window.addEventListener('load',function(){})

window.onload是窗口(页面)加载事件，当文档内容完全加载完会触发该事件（包括图像，脚本文件，CSS文件等），就调用处理函数

注意：

1. 有了window.onload就可以把JS代码写到页面元素上面，因为onload是等页面内容全部加载完毕，再去执行处理函数

2. window.onload传统注册方式只注册一次，如果由多个，会以最后一个为准

3. 如果使用addEventListener则没有限制

document.addEventListener('DOMContentLoaded',function(){})

DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等（IE9以上才支持）

如果页面图片很多的话，从用户访问到onload触发可能需要较长的时间，交互效果就不能实现，必然影响到用户体验，此时用DOMContentLoaded事件比较合适

调整窗口大小事件

window.onresize=funtion(){}
window.addEventListener("resize",function(){})

该事件是调整窗口大小的事件，当触发时就调用处理函数

注意

1. 只要窗口大小发生像素变化，就会触发这个事件
2. 经常利用这个事件完成响应式布局，window.innerWidth获取当前屏幕宽度