BOM_1

这是我参与「第五届青训营」伴学笔记创作活动的第 11 天

定义

构成

window对象是浏览器的顶级对象，具有双重角色

JS访问浏览器窗口的接口
全局对象定义在全局作用域中的变量、函数都会变成window对象的方法和属性
调用的时候可省略window 如alert() prompt()等
特殊属性 window.name

窗口加载事件

window.onload 窗口（页面）加载事件，文档内容完全加载完成会触发该事件（包括图像、脚本文件、CSS文件等），就调用的处理函数。

注意

有了window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕再去执行处理函数
window.onload传统方式只能写一次否自以最后一次为准
如果使用addEventListener 没有限制

        window.onload = function() {
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() {
                alert('点击我');
            })
        }
        window.onload = function() {
            alert(22);
        }
        // 只能执行最后一个 alert(22) alert('点击我')不执行

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

        window.addEventListener('load',function() {
            alert('22');
        })
        // addEventListener 无限制

如果页面图片很多，用户访问到Onload则可能需要较长时间，交互效果不能实现，影响体验，此时用DOMContentLoaded时间比较合适 document.addEventListener('DOMContentLoaded', function(){})

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

        window.addEventListener('load',function() {
            alert(22);
        })
        document.addEventListener('DOMContentLoaded', function() {
            alert(33);
        })
        // 1. 33; 2. 22; 3. click

调整窗口大小事件

window.onresize = function(){}<br> window.addEventListener('resize',function(){});

注意：

window.onresize 触发立即调用
完成响应式布局:window.innerWidth当前屏幕宽度

SetTimeOut

        setTimeout(function() {
            console.log('时间到了');
        }, 2000);   // 默认时间是0，单位是毫秒

        function callback() {
            console.log('爆炸了');
        }   // 定时器很多是，可赋值一个标识符 timer1 = setTimeout()...
        setTimeout(callback, 3000);
        // setTime('callback()', 3000); 我们不提倡这个写法

clearTimeout(timer)

停止计时 clearTimeout(timer); // 传入的是函数名，不带括号

实例：

    var btn = document.querySelector('button');
        var ad = document.querySelector('img');
        var timer = setTimeout(function() {
            ad.style.display = 'none';
        }, 2000)
        btn.onclick = function() {
            clearTimeout(timer);    // 传入的是函数名，不带括号
        }

setInterval

每间隔一段时间反复调用

    // 语法规范：windowsetInterval(调用函数，延时时间);
    setInterval(function() {
        console.log('继续输出');
        }, 1000);

实例：

        countDown();    /* 先调用一次，防止刷新时有空白 */
        function countDown() {
            var span_1 = document.querySelector('#span_1');
            var span_2 = document.querySelector('#span_2');
            var span_3 = document.querySelector('#span_3');
            var inputTime = +new Date('2023-1-24 18:00:00');
            var nowTime = +new Date();
            var times = (inputTime - nowTime) / 1000;
            var h = parseInt(times / 60 / 60 % 24);
            h = h < 10 ? '0' + h : h;
            span_1.innerHTML = h;
            var m = parseInt(times / 60 % 60);
            m = m < 10 ? '0' + m : m;
            span_2.innerHTML = m;
            var s = parseInt(times % 60);
            s = s < 10 ? '0' + s : s;
            span_3.innerHTML = s;
        }
        setInterval(countDown, 1000);

clearInterval

    var begin = document.querySelector('.begin');
        var stop = document.querySelector('.stop');
        var timer = null; /* 全局变量 置空 */
        begin.addEventListener('click', function() {
           /*  var timer = setInterval(function(){
                console.log('ni hao ma');
            }) */  // 局部变量，外部函数stop无法调用 报错
            timer = setInterval(function() {
                console.log('ni hao ma');
            }, 1000)

        });
        stop.addEventListener('click', function() {
            clearInterval(timer);
        })

实例：发送短信案例

        var btn = document.querySelector('button');
        var time = 3;
        btn.addEventListener('click', function() {
            btn.disabled = true; 
            var timer = setInterval(function() {
                if (time == 0 ) {   // 先计时，每次再判断
                clearInterval(timer);
                btn.disabled = false;
                btn.innerHTML = '发送';
                time = 3;
                } else {
                btn.innerHTML = '还剩'+time+'秒';
                time--;
                }
            }, 1000);
        })

this 指向问题

// this 指向问题 一般情况下 this 最终指向的是调用它的对象
        
        // 1 全局作用域或者普通函数中 this 指向全局对象 window （注意定时器力的this也指向window）
        console.log(this); // window

        function fn() {
            console.log(this);
        }
        window.fn(); // window
        
        window.setTimeout(function() {
            console.log(this);

        },1000); // window
        
        // 2 方法调用中谁调用 this 指向谁
        var o = {
            sayHi: function() {
                console.log(this);
            }
        }
        o.sayHi();  // object>sayHi()

        var btn = document.querySelector('button');
        btn.onclick = function() {
            console.log(this);  // 指向btn按钮
        }


        btn.addEventListener('click', function() {
            console.log(this);
        })
        // 3 构造函数this指向构造函数实例
        function Fun() {
            console.log(this);  // this 指向的是fun 实例对象
        }
        var fun = new Fun();

同步和异步

js执行机制

事件循环（eventloop）由于主线程不断地重复获得任务、执行任务、再获取、再执行……

location 对象

URL

属性

方法

history

offsetLeft 和 offsetTop 获取元素偏移

动态得到元素位置(带定位）大小（包含padding + border + width）

注：parentNode 返回亲爸爸不管有无定位；offsetParent 返回有定位

offset 和 style 区别

client

scroll

scrollHeight 真正的内容大小不单指盒子大小

三大系列对比

主要用法：

offset系列用于获取元素位置 offsetLeft offsetTop
client用于获取元素大小 clientWidth clientHeight
scroll 用于获取滚动距离 scrollTop scrollLeft
注意页面滚动距离通过window.pageXOffset获得

参考资料：黑马程序员JavaScript核心教程，前端基础教程，JS的DOM BOM操作教程_哔哩哔哩_bilibili

附：如有错误，恳请指正，侵权必删:

BOM_1 | 青训营笔记