JavaScript——BOM（笔记）

---

BOM

---

wiodow对象事件

window.onload = function(){
    // onload等页面加载完毕执行
	alert('窗口加载事件'); // 阔以放到页面任何位置
}

window.addEventListener("load",function(){
   
	alert('窗口加载事件'); // 与onload相同
})

document.addEventListener("DOMContentLoaded",function(){
    
	alert('窗口加载事件'); // 主要的DOM 标签 加载完毕后执行 不包括图片，
})

窗口加载事件

window.onresize = function(){
    // onresize 浏览器窗口发生改变时触发
	console.log(window.innerWidth); // 当前浏览器屏幕的宽度
}

window.addEventListener('resize',function(){
   
	console.log(window.innerWidth); // 当前浏览器屏幕的宽度
})

定时器

setTimeout()

window.setTimeout(调用函数, [延迟的毫秒数]); 触发一次 window 阔以省略

window.setTimeout(function(){
   
	alert('调用1次'); // 处理函数
},2000) // 延迟时间

停止定时器
window.clearTimeout(timeoutID)（timeoutID标识符名）

var btn = document.querySelector("button");
var timer = setTimeout(function(){
    // timer 是代表着这个定时器
	alert('爆炸了');
},3000) // 延迟时间
btn.addEventListener("click",function(){
    
	clearTimeout(timer); // 清除timer这个定时器
})

setInterval()

window.setInterval(回调函数, [间隔的毫秒数]); 第一次执行也是间隔毫秒数之后执行，之后每隔毫秒数就执行一次

window.setInterval(function(){
   
	alert('调用多次')
},2000) // 延迟时间

停止定时器
window.clearInterval(intervalID)（timeoutID标识符名）

var btn = document.querySelector("button");
var timer = window.setInterval(function(){
    // timer 代表这个定时器
	alert('调用多次')
},2000) // 延迟时间
btn.addEventListener("click",function(){
   
	clearInterval(timer); // 清除timer这个定时器
})

this

1. 全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）
2. 方法调用中谁调用this指向谁
3. 构造函数中this指向构造函数的实例

JS执行机制

同步：按顺序执行（烧水）—>（切菜）—>（炒菜）
异步：在同步做完时在执行异步，并同时做多个事情在（烧水）时同时做（切菜）—>（炒菜）

1. 先执行执行栈中的同步任务。
2. 异步任务（回调函数）放入任务队列中。
3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

console.log(1);
document.onclick = function(){
   
	console.log('click');
}
console.log(2);
setTimeout(function(){
   
	console.log(3);
},3000) 
// 先执行同步 1 , 2 在将点击事件和定时器提交给异步任务 当点击了就输出 click 3秒后输出 3
// 1 2 click 3 或 1 2 3 click

location对象

URL：protocol://host[:port]/path/[?query]#fragment
通信协议://主机[:端口号]/路径/[?参数]#片段
例：ht