WebApi编程（四）-BOM

最新推荐文章于 2024-09-02 17:34:07 发布

dimingda

最新推荐文章于 2024-09-02 17:34:07 发布

阅读量639

点赞数 1

分类专栏： js 文章标签： javascript js

本文链接：https://blog.csdn.net/dimingda/article/details/121142053

版权

本文介绍了BOM（浏览器对象模型）的核心对象window，详细讲解了window的常见事件，如预加载、窗口大小调整、定时器的使用，并探讨了js执行队列的概念和异步任务处理。此外，还涉及了window对象的location属性用于处理URL，以及两页面之间如何互传值和浏览器类型及历史的检测。

摘要由CSDN通过智能技术生成

BOM

1.BOM
什么是bom
BOM是浏览器对象模型，核心对象是window，提供了与浏览器窗口进行交互的对象。
在这里插入图片描述
window是浏览器的顶级对象，是js访问浏览器的窗口，js所有的全局变量和函数window对象的属性和方法。
2.window常见事件
预加载：
① window.onload = function(){}
实现加载，因为html是按上下顺序执行，如果js代码放在上边就不好用了，可以使用onload预加载
②window.addEventListener(‘DOMContentLoaded’, function () { })
dom加载完就可以，速度比①快

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 由于按顺序执行，所以下面的代码出错，不会弹出
        // var button = document.querySelector('button');
        // button.addEventListener('click', function() {
     
        //     alert('11');
        // } )
        
        // ①onload方法，等待dom，图片，css等全部加载完
        // 传统方法具有唯一性，起作用只能是最后一个
        window.onload = function() {
     
            var button = document.querySelector('button');
            button.addEventListener('click', function() {
     
            alert('11');
        } )
        }

        // 事件监听方法可以绑定多个
        window.addEventListener('load', function () {
     
            var button = document.querySelector('button');
            button.addEventListener('click', function() {
     
            alert('131');
        })
        })
        
        window.addEventListener('load', function () {
     
            var button = document.querySelector('button');
            button.addEventListener('click', function() {
     
            alert('132');
        })
        
        })
        // ②DOMContentLoaded,等待加载完dom就
        window.addEventListener('DOMContentLoaded', function () {
     
            alert('22222')
        })
    </script>
    <button>点击</button>
</body>
</html>

调整窗口大小
利用resize事件，当窗口大小发生变化时，就会触发事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title

最低0.47元/天解锁文章

dimingda

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebApi编程（四）-BOM

BOM1.BOMBOM是浏览器对象模型，核心对象是window，提供了与浏览器窗口进行交互的对象。window是浏览器的顶级对象，是js访问浏览器的窗口，js所有的全局变量和函数window对象的属性和方法。2.window常见事件...
复制链接

扫一扫

专栏目录