js的BoM事件
一.bom的概述
1.1什么是bom
一般的，一个网页的前进，后退，刷新，窗口大小的调整都跟bom有关。Bom由一系列对象组成，且每个对象都提供了很多方法与属性。Bom缺乏标准，兼容性差。
DoM与BoM的对比
1.2 Bom的构成
Bom比Dom更大，它包含了Dom
window对象是浏览器的顶级对象，具有双重角色
二.window对象常用的事件
2.1窗口加载事件
window.onload(){};
这个上上一篇博客鼠标事件讲过，需要注意的是，这种方式只能写一次，如果你写了多个，只有最后一个起作用。
最新的写法：
window.addEventListener('load',function(){})
可多次使用
还有一种方法：
//DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等，ie9以上支持
document.addEventListener('DOMContentLoaded',function(){})
这两种方法的区别是，当页面图片过多时，用第二种比较好，因为：
如果这两种方法一起用，显然，先起作用的是第二种方法，原因：
2.2调整窗口大小事件
window.onresize=function(){};
window.addEventListener("resize",function(){});
小李子:
<body>
<div></div>
<script>
var div=document.querySelector('div');
window.addEventListener("resize",function(){
console.log(window.innerWidth);
if(window.innerWidth<=800){
div.style.display='none';
}
});
</script>
</body>
当盒子的宽度小于800时隐藏，常用这个完成响应式布局
三.定时器
3.1两种定时器
- setTimeout()
- setinterval()
3.2 setTimeout()定时器
语法：window.setTimeout(调用函数，[延迟的秒数]);
小李子：
<script>
setTimeout(function() {
console.log('?????????????????');
}, 2000);
</script>
延迟的秒数单位时ms（毫秒），这个小李子就是两秒之后输出？？？？？，
如果函数的内容比较多，还可以把函数写在外面
<script>
function bang(){
console.log('?????????????????');
}
setTimeout(bang,3000);
// setTimeout('bang()',3000);第二种写法
</script>
如果页面中有很多定时器，给每一个定时器加标识符以区分
3.2回调函数
普通函数是按照代码顺序直接调用，而这个函数，需要等待时间，时间到了才去调用这个函数
小李子：
五秒后自动关闭的广告，核心思路：五秒后把广告隐藏起来
body>
<img src="55.jpg" id="u">
<script>
var uu=document.getElementById("u");
setTimeout(function(){
uu.style.display="none";
}, 5000);
</script>
3.3停止setTimeout()定时器
小李子：
<body>
<button id="u" >点击停止定时器</button>
<script>
var uu=document.getElementById("u");
var Time1= setTimeout(function(){
console.log("!!!!");
}, 5000);
uu.addEventListener('click',function(){
clearTimeout(Time1);
})
</script>
</body>
3.4setInterval()定时器
setInterval()方法的语法跟setTimeout()一样，不同的是，setInterval()方法是重复调用一个函数，每隔这个时间，就去调用一次回调函数。
setInterval()用法：
<script>
setInterval(function(){
console.log("!!!!!!!!!!");
},1000) ;
</script>
每隔一秒输出！！！！！！！！！！！
两者区别：
3.5停止setInterval()定时器
小栗子：
<body>
<button class="class0">开启定时器</button>
<button class="class1">关闭定时器</button>
<script>
var time1=null;
var class0=document.querySelector('.class0');
var class1=document.querySelector('.class1');
class0.addEventListener('click',function(){
time1= setInterval(function(){
console.log("nihao");
} ,1000);
})
class1.addEventListener('click',function(){
clearInterval(time1);
})
</script>
</body>
3.6发送短信
点击按纽之后，60秒之内不可点击按纽，防止重复发送短信
核心思路：
小栗子：
<body>
手机号码：<input type="text"><button>发送</button>
<script>
var time1=null;
var time=10;
var btn=document.querySelector('button');
btn.addEventListener('click',function(){
btn.disabled=true;
time1=setInterval(function(){
btn.innerHTML='还剩下'+time+ '秒';
if(time==0){
clearInterval(time1);
btn.innerHTML='发送';
btn.disabled=false;
time=10;
}
time--;
}
,1000 );
})
</script>
</body>
3.7 this指向
<button></button>
<script>
//全局作用域或者普通函数中this指向全局对象window
console.log(this);
function fn(){
console.log(this);
}
fn();
//方法调用中，谁调用，this指向谁
var o={
sayHi:function(){
console.log(this);
}
}
o.sayHi();
var btn=document.querySelector('button');
btn.onclick=function(){
console.log(this);
}
</script>
四.js执行队列
4.1 js是单线程
4.2 同步和异步
<script>
console.log('1');
setTimeout(function(){
console.log('3');
},3000)
console.log('2');
</script>
打印结果是：
为什么2比3先打印出来呢，就是因为js的异步，同步和异步的本质区别就是：一条流水线上各个流程执行顺序不同。
那么如果定时器设置零秒后执行，那么打印顺序会是多少呢？？
<script>
console.log('1');
setTimeout(function(){
console.log('3');
})
console.log('2');
</script>
结果是：这是为什么呢？？？？？？？
js会把这三个放到一条执行线上，是同步任务，但是 setTimeout(function(){}）里的(function(){}是回调函数，属于异步任务，常见的异步任务有几类：
异步任务会被放到异步队列里面，总而言之，同步任务放到主线程的执行栈里，异步任务放在任务队列里。
4.3 js的执行机制
1.先执行同步栈里的同步任务
2.遇到回调函数，把回调函数放任务队列里
3.一旦同步栈里的同步任务执行完，系统按次序执行任务队列里的异步任务，被读取的异步任务结束等待状态，进入执行栈，开始执行。
多个异步任务怎么处理：
例子：
可以看到，以上有两个异步任务，第一个点击事件，如果你不点击，那么同步栈里的同步任务就会略过，到定时器事件，把定时器事件放到任务队列里，然后执行完同步任务，任务队列里的异步任务到同步栈里执行，如果你点击了，就被放到任务队列里，如果你在定时器的三秒内点击，先执行click事件，如果在定时器的三秒后点击，先执行定时器的任务再执行click事件，这个是跟你的操作时间有关。
五.Loction对象
5.1 Loction对象
5.2 URL
URL的一般语法格式：
5.3Location对象的属性
例子：
<body>
<button>点击</button>
<script>
var btn=document.querySelector('button');
btn.addEventListener('click',function(){
location.href='http://qingluanyun.com/';
})
</script>
</body>
实现页面的跳转，
案例：五秒后自动跳转的页面
<div></div>
<script>
var time=5;
var div=document.querySelector('div');
setInterval(function(){
if(time==0){
location.href='http://qingluanyun.com/';
}
else{ div.innerHTML='页面将在'+time+'五秒后跳转';
time--;}
}, 1000);
</script>
案例：获取URL的参数数据
第一个页面的用户名被第二个页面获取
第一个页面
<form action="practiced.html">
用户名：<input type="text" name="uname" >
<input type="submit" value="登陆" >
第二个页面
<body>
<div></div>
<script>
var par=location.search.substr(1);
var arr=par.split('=');
var div=document.querySelector('div');
div.innerHTML=arr[1]+'，欢迎你';
</script>
</body>
5.4 location对象的方法
1.assign（），点击按纽，跳转页面，因为记录浏览历史，所以可实现后退功能
<body>
<button>点击</button>
<script>
var btn=document.querySelector('button');
btn.addEventListener('click',function(){
location.assign('https://www.runoob.com/');
})
</script>
</body>
2.replace（），不记录历史，不可后退，其他跟assign（)一样。
3.reload（），重新加载页面，相当于页面的刷新按纽
六. navigator对象
七.history对象
forward（）相当于页面的前进，back（)相当于页面的后退
例子：
第一个页面：
body>
<button>前进</button>
<a href="practiced.html">点我</a>
<script>
var btn=document.querySelector('button');
btn.addEventListener('click',function(){
history.forward();
})
</script>
</body>
第二个页面：
<body>
<button>后退</button>
<a href="practice.html">点我</a>
<script>
var btn=document.querySelector('button');
btn.addEventListener('click',function(){
history.back();
})
</script>
</body>
go(1)就是去下一个页面，go(-1)就是回上一个页面。
859
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
