load 事件
load 等页面内容全部加载完毕, 包含页面dom元素 图片 flash css 等
DOMContentLoaded 是DOM 加载完毕 不包含图片 flash css 等就可以执行 加载速度比load 更快一些
//页面先弹出 HELLO, 之后点击按钮弹出 BOM window.addEventListener('load', function() { var btn = document.querySelector('button') btn.addEventListener('click', function() { alert('BOM!') }) }) document.addEventListener('DOMContentLoaded', function(){ alert('HELLO') })
调整窗口大小 (resize)
resize:调整窗口大小时触发事件
window.innerHTML 获取当前屏幕宽度
//css代码 div { width: 200px; height: 200px; background-color: lightblue; } //js代码 window.addEventListener('load', function(){ var div = document.querySelector('div') //改变窗口大小 打印输出窗口的变化 window.addEventListener('resize', function(){ console.log(window.innerWidth); console.log('窗口大小变化了'); //当宽度小于800px时 隐藏div if(window.innerWidth <= 800){ div.style.display = 'none' } else { div.style.display = 'block' } }) })
不积跬步无以至千里 不积小流无以成江海
