JS 44 BOM基础

一.目标:

1.能说出什么是BOM
2.能知道浏览器的顶级对象window
3.能够写出页面加载事件以及注意事项
4.能够写出两种定时器函数并说出区别
5.能够说出JS执行机制
6.能够使用location对象完成页面间的跳转
7.能够知晓navigator对象涉及的属性
8.能够使用history提供的方法实现页面刷新

二.BOM概述

1.BOM(Browser ObjectModel)即浏览器对象模型,他提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window
2.BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性
3.BOM缺乏标准.JS标准化组织是ECMA,DOM标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分
4.BOM把[浏览器]当做一个对象来看待,他的顶级对象是window,兼容性较差
5.BOM比DOM更大,它包含DOM.
注意:
window下的一个特殊属性window.name

三.页面加载事件

1.当文档内容完全加载完成之后(包含样式表,图片,CSS等)才会触发该事件,就调用处理的函数
window.οnlοad=function(){}
或者
window.addEventListener(‘load’,function(){});
例如:

        window.addEventListener('load',function(){
            var btn=addEventListener('click',function(){
                alert('点击');
            });
        });

2.仅当DOM加载完成(不包含样式表,图片,flash,CSS等)就会触发改事件. IE9以上,用于图片等较多时
document.addEventListener(‘DOMContentLoaded’,function(){});
例如:

        document.addEventListener('DOMContentLoaded',function(){
            var btn=addEventListener('click',function(){
                alert('点击');
            });
        });

四.调整窗口大小事件

window.onsize=function(){}
或者
window.addEventListener(‘resize’,function(){});
注意:
1.只要窗口大小发生像素变化,就会触发这个事件.
2.我们经常利用这个事件完成响应式布局.window.innerWidth 当前屏幕的宽度
例:当前浏览器窗口宽度小于800时将div隐藏

    window.onload=function(){
        var div=document.querySelector('div');
        window.addEventListener('resize',function(){
            if(window.innerWidth<=800){
                div.style.display='none';
            }else{
                div.style.display='block';
            }
        });
    }