JavaScript：从DOM概述到window对象的常见事件

一、BOM概述

1.BOM的概念

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window

2.BOM的构成

BOM比DOM更大，它包含DOM

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

1.它是JS访问浏览器窗口的一个接口

2.它是一个全局对象，定义在全局作用域中的变量，函数都会编程window对象的属性和方法，在调用的时候可以省略window，像alert（）、prompt（）等

注意：window下的一个特殊属性window.name本身有含义，尽量避免定义name变量

二、window对象的常见事件

1.窗口加载事件 

（1）针对window

window.onload = function(){}

或者

window.addEventListener("load",function(){})

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

注意：

1.使用window.onload可以将script写在页面任何一个位置，不再像之前一样智能写在要加JS属性的HTML标签语句下了

2.window.onload传统注册事件方式只能写一次，如果有多个，回忆最后一个window.onload为准

3.使用addEventListener没有限制 

传统注册事件方式： 

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

事件监听注册事件方式：

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

（2）针对document

document.addEventListener('DOMContentLoaded',function(){})

DOMContentLoaded事件触发时，晋档dom加载完成，不包括样式表，图片，flash等

IE9以上才支持

如果页面的图片很多，从用户访问到onload触发肯需要较长时间，交互效果就不能实现，必然影响用户的体验，此时用DOMContentLoadd事件比较合适

document.addEventListener('DOMContentLoaded', function () {
   alert(33);
})

2.调整窗口大小事件

window.onresize = finction(){}

或者

window.addEventListener("resize",function(){})

window.onresize是调整窗口大小加载事件，当触发时就调用的处理函数

注意：

1.只有窗口大小发生像素变化，就会触发这个事件

2.我们经常用这个事件完成响应式布局。window.innerWidth 当前屏幕的宽度

3.定时器

（1）setTimeout()

window.setTimeout(调用函数,[延迟的毫秒数]);

 setTimeout（）方法用于设置一个定时器，该定时器在定时器到期后执行调用函数

语法规范：

1.window在调用时可以省略

2.这个延时时间单位是毫秒，但是可以省略，默认是0

3.这个调用函数可以自己写函数，还可以写函数名

        例如

function callkbak() {
   console.log('爆炸了');
}
setTimeout(callkbak, 3000);

4.页面中可能有很多计时器，我们经常给定时器加标识符（名字）

var time1 = setTimeout(callkbak, 3000);
var time2 = setTimeout(callkbak, 5000);

  setTimeout（）这个函数调用我们也称为回调函数callback

普通函数是按照代码顺序直接调用 

案例：5秒后自动关闭的广告

var ad = document.querySelector('img');
setTimeout(function () {
     ad.style.display = 'none';
}, 5000);

（2）clearTimeout（）

clearTimeout（）方法取消了先前通过调用setTimeout（）建立的定时器

注意：

1.window可以省略

2.里面的参数就是定时器的标识符

        例如：

var btn = document.querySelector('button');
timer = setTimeout(function () {
   console.log('爆炸了');
}, 5000);
btn.addEventListener('click', function () {
   clearTimeout(timer);
})

（3）setInterval()

window.setTimeout(调用函数,[延迟的毫秒数]);

setInterval()这个调用函数也称为回调函数

注意：

1.window可以省略

2.可以直接写函数，或者写函数名或者采取字符串‘函数名（）’三种形式

        例如：

setInterval(function () {
   console.log(1);
}, 1000);

 setInterval()与setTimeout（）的区别：

1.  setInterval（）是间隔这个时间后执行，只执行一次
2. setTimeout（）是每隔这个时间执行一次，重复执行

案例：倒计时

css：

span {
   display: inline-block;
   height: 20px;
   width: 20px;
   text-align: center;
   line-height: 16px;
   font-size: 16px;
   color: #fff;
   background-color: #000;
   margin: 5px;
}

HTML：

<div>
   <span class="hour">1</span>
   <span class="minute">2</span>
   <span class="second">3</span>
</div>

JavaScript：

var hour = document.querySelector('.hour');
var minute = document.querySelector('.minute');
var second = document.querySelector('.second');
var inputTime = +new Date('2025-7-22 18:00:00');
count();
setInterval(count, 1000);
function count() {
    var nowTime = +new Date();
    var times = (inputTime - nowTime) / 1000;
    var h = parseInt(times / 60 / 60 % 24);
    h = h < 10 ? '0' + h : h;
    hour.innerHTML = h;
    var m = parseInt(times / 60 % 60);
    m = m < 10 ? '0' + m : m;
    minute.innerHTML = m;
    var s = parseInt(times % 60);
    s = s < 10 ? '0' + s : s;
    second.innerHTML = s;
}

（4）clearInterval（）

window.clearInterval(intervalID);

clearInterval（）方法取消了先前通过调用setInterval（）建立的计时器

注意：

1.window可以省略

2.里面的参数就是定时器的标识符

        例如：对于一个开始按钮和结束按钮看，要使点击开始后开始计数，点击结束后结束计数

var start = document.querySelector('.start');
var stop = document.querySelector('.stop');
start.addEventListener('click', function () {
    timer = setInterval(function () {
         console.log('hi');
    }, 1000);
})
stop.addEventListener('click', function () {
    console.log('bye');
    clearInterval(timer)
})

 案例：发送短信

点击按钮后，该按钮60秒内不能再点击

对于一个发送按钮

<button>发送</button>

给它设置JS

var btn = document.querySelector('button');
var time = 60;
btn.addEventListener('click', function () {
    btn.disabled = true;
    var timer = setInterval(function () {
       if (time == 0) {
           clearInterval(timer);
           btn.disabled = false;
           btn.innerHTML = '发送';
           time = 60;
       }
       else {
           btn.innerHTML = '还剩下' + time + '秒';
           time--;
       }
    }, 1000);
})

（5）this

this的指向在函数定义的时候无法确定，只有再函数执行的时候才能确定this到底指向谁，一般情况下this指向的是调用它的对象 

1.全局作用域或者普通函数里this指向全局对象window

        直接输出this的指向，为window

console.log(this);//window

        输出函数里this的指向，也是window

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

2.方法调用中，谁调用指向谁

var o = {
   sayHi: function () {
       console.log(this);//o
   }
}
o.sayHi();

var btn = document.querySelector('button');
btn.addEventListener('click', function () {
    console.log(this);//btn
});

3.构造函数中this指向构造函数

function fn() {
    console.log(this);//fun
}
var fun = new fn();