1.1、什么是BOM
BOM就是浏览器对象模型，提供了独立于内容而与浏览器窗口进行交互的对象，核心对象是window
1.2、BOM的构成
BOM比DOM更大，BOM包含DOM
2.1窗口加载事件
window.onload=function(){} 或则 window.addEventListener("load",function(){})
有了window.onload 就可以把JS文件写在页面上方 当文档内容全部被加载后，调用处理函数 window.onload只能写一次，如果使用addEventListener就没有限制
2.2、调整窗口大小事件
window.onresize=function(){} 或则 window.addEventListener("resize",function(){})
window.onresize是调整窗口大小加载事件，触发就会调用处理函数 利用这个事件可以完成响应式布局 window.innerWidth当前屏幕的宽度
3.1、定时器 setTimeout()
<script>
// 1. setTimeout
// 语法规范： window.setTimeout(调用函数, 延时时间);
// 1. 这个window在调用的时候可以省略
// 2. 这个延时时间单位是毫秒 但是可以省略，如果省略默认的是0
// 3. 这个调用函数可以直接写函数 还可以写 函数名 还有一个写法 '函数名()'
// 4. 页面中可能有很多的定时器，我们经常给定时器加标识符 （名字)
function callback() {
console.log('爆炸了');
}
var timer1 = setTimeout(callback, 3000);
var timer2 = setTimeout(callback, 5000);
</script>
3.2、停止计时器 clearTimeout
<body>
<button>点击停止定时器</button>
<script>
var btn = document.querySelector('button');
var timer = setTimeout(function() {
console.log('爆炸了');
}, 5000);
btn.addEventListener('click', function() {
clearTimeout(timer);
})
</script>
</body>
3.3、定时器setInterval（）
<body>
<script>
setInterval(function() {
console.log('继续输出');
}, 1000);
// 1. setTimeout 延时时间到了，就去调用这个回调函数，只调用一次 就结束了这个定时器
// 2. setInterval 每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数
</script>
</body>
3.4、清除定时器 clearInterval
<body>
<button class="begin">开启定时器</button>
<button class="stop">停止定时器</button>
<script>
var begin = document.querySelector('.begin');
var stop = document.querySelector('.stop');
var timer = null; // 全局变量 null是一个空对象
begin.addEventListener('click', function() {
timer = setInterval(function() {
console.log('ni hao ma');
}, 1000);
})
stop.addEventListener('click', function() {
clearInterval(timer);
})
</script>
</body>
=============================定时器发送短信案列=========================
<body>
手机号码： <input type="number"> <button>发送</button>
<script>
// 按钮点击之后，会禁用 disabled 为true
// 同时按钮里面的内容会变化， 注意 button 里面的内容通过 innerHTML修改
// 里面秒数是有变化的，因此需要用到定时器
// 定义一个变量，在定时器里面，不断递减
// 如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状态
var btn = document.querySelector('button');
var time = 3; // 定义剩下的秒数
btn.addEventListener('click', function() {
btn.disabled = true;
var timer = setInterval(function() {
if (time == 0) {
// 清除定时器和复原按钮
clearInterval(timer);
btn.disabled = false;
btn.innerHTML = '发送';
} else {
btn.innerHTML = '还剩下' + time + '秒';
time--;
}
}, 1000);
})
</script>
</body>
=======================================================================
4、this指向问题总结!!!
<body>
<button>点击</button>
<script>
// this 指向问题 一般情况下this的最终指向的是那个调用它的对象
// 1. 全局作用域或者普通函数中this指向全局对象window（ 注意定时器里面的this指向window）
console.log(this); //window
function fn() {
console.log(this); //window
}
window.fn();
window.setTimeout(function() {
console.log(this); //window
}, 1000);
// 2. 方法调用中谁调用this指向谁
var o = {
sayHi: function() {
console.log(this); // this指向的是 o 这个对象
}
}
o.sayHi();
var btn = document.querySelector('button');
btn.onclick = function() {
console.log(this); // this指向的是btn这个按钮对象
}
btn.addEventListener('click', function() {
console.log(this); // this指向的是btn这个按钮对象
})
// 3. 构造函数中this指向构造函数的实例
function Fun() {
console.log(this); // this 指向的是fun 实例对象
}
var fun = new Fun();
</script>
</body>
