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)就是回上一个页面。