页面加载事件
- 指文档特定内容加载完成后触发的事件
- 包括window.onload和document.DOMContentLoaded两类
- load类型会加载所有文档内容，包括图片、脚本文件、css文件等
- DOMContentLoaded仅加载DOM内容，适用于图片较多时用户快速得到交互效果
// document的事件会先发生
document.addEventListener('DOMContentLoaded', function () {
alert('document的页面加载事件');
\});
window.addEventListener('load', function () {
alert('window的页面加载事件');
});
- 通过页面加载事件，可以把js代码写到html标签之前，因为事件是html标签加载后再触发，必定能找到元素对象
<head>
<script>
window.addEventListener('load',function() {
var myBtn = document.querySelector('button');
myBtn.addEventListener('click',function() {
alert('hello');
})
});
</script>
</head>
<body>
<button>按钮</button>
</body>
窗口大小事件
- window.onresize，监听浏览器窗口大小，只要发生变化便会触发
window.addEventListener('resize',function() {
consoloe.log('窗口大小变化了');
});
- window.innerWidth和innerHeight，可获取当前浏览器窗口的宽高
