js之BOM学习，页面加载事件，定时器，js同步异步，location参数，this指向问题

最新推荐文章于 2024-07-17 21:56:00 发布

小白蛋挞

最新推荐文章于 2024-07-17 21:56:00 发布

阅读量926

点赞数 1

分类专栏： JavaScript 文章标签： javascript BOM 浏览器对象模型 html5

本文链接：https://blog.csdn.net/m0_61547956/article/details/124367849

版权

本文详细介绍了BOM（浏览器对象模型）的核心对象window及其相关事件，如页面加载事件、窗口大小调整事件。讲解了定时器setTimeout和setInterval的使用，包括倒计时效果实现和清除定时器的方法。此外，还探讨了JavaScript中的this指向问题、同步与异步执行的概念及过程，以及location对象、navigator对象和history对象的相关方法。通过实例解析，帮助读者深入理解JavaScript在浏览器环境中的工作原理。

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

什么是BOM？

BOM（Browser Object Model）浏览器对象模型，提供了独立于内容而与窗口进行交互的对象，核心对象是window，学习与浏览器进行交互的一些对象比如怎么后退一个页面，前进一个页面，刷新等。BOM由一系列对象组成，每个对象有其对应的属性和方法，BOM缺乏标准，浏览器厂商再各自浏览器上定义的JS的语法标准化组织是ECMA，DOM是W3C。

var num = 10 
log(num)
log(window.log)全局变量变成window对象的属性
function fn(){

}
fn()
window.fn()函数变成window对象的一个方法
可以省略window,alert和prompt都属于window的方法
var name = 10 不要这样写 window中有个特殊属性name

页面加载事件

window.onload = function(){}

或者window.addEventListener('load',function(){})

是页面加载事件，当文档内容全部加载完就会触发事件，包括（图像，文本，脚本，样式）等调用处理函数。这样就能把js脚本放到html页面中任何位置了，之前只能在标签的下面，因为是按照从上往下依次执行的。

还有一个document.addEventListener('DOMContentLoaded',function(){})这个是仅当DOM加载完毕（不包括样式，图像等）如果一个页面图片很多，等全部的图像加载完需要一定时间，影响用户体验，我们可以使用这个。加载速度比load快。

<body>

    <script>
        // window.onload = 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);//先33
                // console.log(33);
            })

            // window.addEventListener('load',function(){})
            // window.onload是窗口(页面)加载事件，当文档内容完全加载完成会触发事件（包括图像，脚本文件，CSS，文件等）就调用的处理函数。
            //可以把script放到任何地方了
            //window.onload传统的注册方式之恩那个写一次，多个以最后一个为准
            // 窗口加载时间document.addEventListener('DOMContentLoaded',function(){})仅当DOM加载完毕，不包括样式表，图片flash等 如果页面图片很多，会影响1用户交互效果，用这个比较好，加载速度比load更快

    </script>
    <button>点击</button>
</body>

调整窗口大小事件

 <script>
        window.addEventListener('load', function() {
                var div = document.querySelector('div');
                // window.onresize = function() {}
                window.addEventListener('resize', function() {
                    console.log(window.innerWidth);
                    if (window.in