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（）的区别：
- setInterval（）是间隔这个时间后执行，只执行一次
- 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();