BOM部分，常见事件，定时器，JS执行队列，location，navigator，history

最新推荐文章于 2023-10-16 15:29:19 发布

tanranranranran

最新推荐文章于 2023-10-16 15:29:19 发布

阅读量1.7k

点赞数 5

本文链接：https://blog.csdn.net/weixin_45638522/article/details/106720712

版权

BOM浏览器对象模型，从常见事件，定时器，JS执行队列，location，navigator，history方面

DOM和BOM的区别

DOM	BOM
文档对象模型	浏览器对象模型
把文档当做一个对象来看待	把浏览器当做一个对象来看待
顶级对象是document	顶级对象是window
主要学习的是操作页面的元素	主要学习的是浏览器窗口交互的一些对象
标准是w3c	浏览器厂家在浏览器上定义的，兼容性较差

我作图水平不太好，又没对齐QAQ

在这里插入图片描述

一、常见事件

1.窗口加载事件

a. window.onload = function() { }

注意

全部加载完再执行代码,所以这个就不用必须按代码执行顺序写
是传统的注册事件的方式，只能写一次，如果有多个，以最后一个为准

<body>
    <script>
        window.onload = function() {
            var btn = document.querySelector('button');
            btn.addEventListener("click", function() {
                alert('少年');
            })
        }
    </script>
    <button>花儿</button>
</body>

b. window.addEventListener(‘load’, function() { })

注意

这个和第一个相比就没有限制了，可以多个
DOM、图片、css、flash…都加载完，再执行代码

<body>
    <script>
        window.addEventListener('load', function() {
            var btn = document.querySelector('button');
            btn.addEventListener("click", function() {
                alert('少年');
            })
        })
    </script>
    <button>花儿</button>
</body>

c.window.addEventListener(‘DOMContentLoaded’, function() { })

注意

这个是只有DOM加载完即可，无需等图片，css，flash…都加载完

<body>
    <script>
        window.addEventListener('DOMContentLoaded', function() {
            var btn = document.querySelector('button');
            btn.addEventListener("click", function() {
                alert('少年');
            })
        })
    </script>
    <button>花儿</button>
</body>

2.调整窗口大小

a.window.οnresize=function(){ }

b.window.addEventListener(“resize”, function() { })

注意

只要窗口大小发生变化就会触发这个事件
可以完成响应式布局，window.innerWidth当前屏幕的宽度，window.innerHeight当前屏幕的高度

这里写一下b函数的代码。。。。。。

<body>
    <script>
        window.addEventListener('resize', function() {
            console.log(innerWidth);
            console.log('大小');
        })
    </script>

</body>

二、定时器

1.设置定时器setTimeout（调用函数或者是直接写的函数，延迟的毫秒数）

注意

原名是window.setTimeout(…,…),但是window可以省略
注意是毫秒数，如果不写默认值是0
可以是调用函数，也可以是直接写的函数，还有一种表达方式是’调用的函数名（）’ ，这种不常用
有很多定时器的时候可以给定时器加标识符（就是起个名字）
这个函数叫做，回调函数callback，等到了时间再回头调用

<body>
    <script>
        setTimeout(function() {
            console.log('小明同学');//直接写函数
        }, 2000)
    </script>
</body>

<body>
    <script>
        function callback() {
            console.log('小明同学');
        }
        setTimeout(callback, 2000);//这种是调用函数滴
    </script>
</body>

2.清除定时器clearTimeout(定时器的标识符)

<body>
    <button>定时器停下来</button>
    <script>
        function callback() {
            console.log('小明同学');
        }
        var time1 = setTimeout(callback, 5000);
        var btn = document.querySelector('button');
        btn.onclick = function() {
            clearTimeout(time1);
        }
    </script>
</body>

3.setInterval(回调函数, 毫秒数);

注意

原名是window.setTimeout(…,…),但是window可以省略
注意是毫秒数，如果不写默认值是0
可以是调用函数，也可以是直接写的函数，还有一种表达方式是’调用的函数名（）’ ，这种不大常用
有很多定时器的时候可以给定时器加标识符（就是起个名字）
这个函数叫做回调函数callback，等到了时间再回头调用
以上这五条和setTimeout一样
不一样的是setInterval函数每隔调用时间就调用函数，是不断重复的，而setTimeout只调用一次

<body>
    <script>
        function callback() {
            console.log('小明同学');
        }
        var time1 = setInterval(callback, 2000);
    </script>
</body>

4.清除定时器clearInterval(定时器的标识符)

<body>
    <button>定时器停下来</button>
    <script>
        function callback() {
            console.log('小明同学');
        }
        var time1 = setInterval(callback, 1000);
        var btn = document.querySelector('button');
        btn.onclick = function() {
            clearInterval(time1);
        }
    </script>
</body>

5.关于this的指向性问题

a.全局作用域或者普通函数中this指向全局变量window（注意定时器里的this指向window）
b.方法调用中谁调用this指向谁
c.构造函数中this指向构造函数的实例

三、JS执行队列

原来JS是单线程的一个时间只能做一件事，为了解决这个问题，JS出现了同步和异步（这里视频里面pink老师这个例子我觉得很生动）
同步：一件事接着一件事做，就像做饭，先十分钟烧水，站着等十分钟水烧开了，再去切菜。
异步：同时做几件事，就像做饭，烧水先把火打开，然后去切菜，锅里的水在烧着，菜也在切着。

同步任务都在主线上执行，形成一个执行线

异步任务通过回调函数实现，异步任务有以下三中类型

1. 普通事件，如click，resize

2. 资源加载，如load

3. 定时器

<body>
    <script>
        console.log('1');
        setTimeout(callback, 0);//注意这里是零秒哦，按照道理应该立即执行

        function callback() {
            console.log('3');
        }
        console.log('2');
    </script>
</body>

输出结果是1 2 3

先执行执行线中的同步任务。
异步任务放到任务队列中。
一旦执行线中的同步任务执行完，按照次序执行任务队列中的异步任务。
又画画了。。。。

四、location

用于获取或者设置URL，这是在B站截得图
在这里插入图片描述

获取

<body>
    <script>
        console.log(location.href);
    </script>
</body>

设置，可以实现页面跳转功能

<body>
    <button>B站</button>
    <script>
        var btn = document.querySelector('button');
        btn.onclick = function() {
            location.href = "https://www.bilibili.com/";
        }
    </script>
</body>