BOM中window 对象的常见事件

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 文件等)完全加载完成会触发该事件, 就调用的处理函数。

 window.onload = function () {
            var btn = document.querySelector('button');
            btn.addEventListener('click', function () {
                alert('点击我');
            })
        }

window.addEventListener('load',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';
                }
            });
        });

注意：

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