目录
1 window.addEventListener(‘load’,function(){})
BOM简介
- BOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window。
- BOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。
- BOM 缺乏标准,JavaScript 语法的标准化组织是 ECMA,DOM 的标准化组织是 W3C,BOM 最初是Netscape 浏览器标准的一部分。
窗口加载事件—传统的load方法
- window.onload =function(){}
- window.addEventListener(‘load’,function(){})
- window.onload 是窗口 (页面)加载事件,当文档内容(包括图像、脚本文件、CSS 文件等)完全加载完成会触发该事件, 就调用的处理函数。
1 window.addEventListener(‘load’,function(){})
window.addEventListener('load',function() {
var btn = document.querySelector('button');
btn.addEventListener('click', function () {
alert('点击我');
})
});
2 window.onload =function(){}
window.onload = function () {
var btn = document.querySelector('button');
btn.addEventListener('click', function () {
alert('点击我');
})
}
注意:
有了window.onload我么就可以把js代码写到页面元素的上方,因为onload是等页面内容全部加载完毕再去执行处理函数的;
window.omload是传统的注册事件方式只能写一次,如果有多个,只有最后一个生效;
如果使用addEventListener则没有限制可以加多个;
高版本浏览器兼容窗口加载事件
document.addEventListener(‘DOMcontentLoaded’,function(){})
document.addEventListener('DOMContentLoaded', function () {
alert(33);
});
1.DOMcontentLoaded事件触发时,仅当DOM加载完成,不包括样式表、图、lash等等;
2.IE9以上的浏览器才支持
3.如果页面的图片很多的话,从用户访问到onload触发可能需要较长的时间,交互效果就不能实现,必然会影响用户体验,此时用DOMcontentLoaded事件比较合适;(加载完一个文档就去执行不需要等全部加载完)
调整窗口大小事件
window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。
window.addEventListener('load', function() {
var div = document.querySelector('div');
window.addEventListener('resize', function() {
//window.innerWidth 是窗口宽度 输出窗口的宽度
console.log(window.innerWidth);
//如果页面宽度小于等于800px 那么隐藏盒子 否则显示盒子
if (window.innerWidth <= 800) {
//让盒子隐藏
div.style.display = 'none';
} else {
//让盒子显示
div.style.display = 'block';
}
});
});
注意:
只要窗口大小发生像素变化,就会触发这个事件。
我们经常利用这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度