jsの再体验 - - BOM（Web APIs 浏览器对象模型）-CFANZ编程社区

jsのBOM浏览器对象模型

一、认识BOM

1.1.对比DOM和BOM

DOM	BOM
文档对象模型（把文档当做一个对象）	浏览器对象模型（把浏览器当做一个对象来看）
顶级对象是document	顶级对象是window
主要学习操作页面元素	主要学习浏览器窗口交互
W3C标准规范	没有标准，兼容性差，浏览器厂商在各自浏览器上定义

二、window - - 浏览器顶级对象

2.1.认识window

<script>
    var num=10
    function fn(){
        console.log(num)           
        console.log(window.num)    
    }
    fn()
    window.fn()
</script>

2.2.onload - - 页面加载事件

<script>
    // 传统的窗口加载事件，不能重复注册,如果注册多次，出现冲突，以最后一次为准
    // window.onload = function(){
    //     var button = document.querySelector('button')
    //     button.addEventListener('click',function(e){
    //         alert('点击按钮')
    //     })
    // }
    // window.onload = function(){
    //     alert(22)
    // }

    // 先弹出11（因为只需要加载完DOM就可以触发事件），再弹出22，再弹出33，点击按钮后再弹出44

    // 新窗口加载事件1 window.addEventListener('load')
    // 文档完全加载完毕才可以触发，可以重复注册
    window.addEventListener('load',function(e){
        alert('22')
        var button = document.querySelector('button')
        button.addEventListener('click',function(e){
            alert('44')
        })
    })
    window.addEventListener('load',function(e){
        alert('33')
    })

    // 新窗口加载事件2 document.addEventListener('DOMContentLoaded')
    // 加载速度比load更快，DOM加载完毕后就会触发(不包括图像，脚本文件，css文件,flash等)，如果遇到页面图片很多的时候可以使用该加载方式，可以调高用户体验感
    // 有兼容性问题，IE9 以上才支持
    document.addEventListener('DOMContentLoaded',function(){
        alert('11')
    })
</script>
<button>点击</button>

2.3.onresize - - 窗口调整大小事件

<script>
    window.addEventListener('load',function(){
        // window.innerWidth 获取屏幕的宽度和高度
        // console.log(window.innerWidth)
        // console.log(window.innerHeight)

        var div=document.querySelector('div')
        // 页面加载完毕后就需要判断当前页面的宽度为多少，当屏幕宽度小于800时隐藏div
        if(window.innerWidth < 800){
            div.style.display = 'none'
        }else{
            div.style.display = 'block'
        }
        // 每次页面大小发送调整是也要进行判断
        window.addEventListener('resize',function(){
            if(window.innerWidth < 800){
                div.style.display = 'none'
            }else{
                div.style.display = 'block'
            }
        })
    })
</script>
<div style="background-color: tomato;width: 200px;height: 200px;"></div>

2.4.定时器的设置setTimeOut与清除clearTimeout

<script>
    window.addEventListener('load',function(){

        // window.setTimeout(回调函数,延时毫秒数)
        
        // window可以省略:setTimeout(function(){},延时毫秒数)
        // 毫秒数也可以省略(默认为0):setTimeout(function(){})
        setTimeout(function(){
            alert('时间到了')
        },2000)

        
        function callback(){
            alert('爆炸了')
        }
        // 调用函数名时不需要加小括号
        setTimeout(callback,3000)
        // 如果加小括号还需要加上双引号(不推荐使用)
        setTimeout('callback()',3000)

        // 需要给定时器添加标识符(名字):由于页面中可能有很多定时器
        var timer1 = setTimeout(callback,3000)
        var timer2 = setTimeout(callback,5000)
    })
</script>

2.4.1.小案例 - - 五秒隐藏广告，5s内鼠标移动到广告上，则不关闭

<script>
    window.addEventListener('load',function(){
        var img = document.querySelector('img')
        // 设置定时器
        var timer = setTimeout(closeadvertisement,5000)
        // 关闭广告(就是将图片隐藏)
        function closeadvertisement(){
            img.style.display = 'none'
        }
        // 若5s内(广告还在时)将鼠标移动到广告上，就不关闭广告(删除定时器即可)
        img.addEventListener('mouseover',function(){
            clearTimeout(timer)
        })
    })
</script>
<img src="./img/3.jpg">