BOM对象大致包括五个部分
Window对象: 浏览器窗口对象
Navigator: 浏览器对象
Screen: 浏览器所处客户端的显示器屏幕对象
History: 浏览器当前窗口的访问历史记录对象
Location: 浏览器当前窗口的地址栏对象
每个对象都有对应的属性和方法,通过这些属性和方法我们可以获取到浏览器的信息,在这五个部分中,Window对象尤为重要,根据图片的区域划分,可以很清楚的看出,Window对象其中就包含了History,Location对象,还有一个非常重要的Document对象,称为DOM对象
windows窗口对象
打开窗口、关闭窗口
window.open("www.baidu.com") 打开一个新的窗口/指定窗口
window.close() 关闭一个窗口
var newPage; //存储打开窗口
element.onclick=function(){
newPage = window.open("https://www.baidu.com") //打开指定窗口
}
element.onclick=function(){
newPage.close() //关闭指定窗口
}
定时器
setTimeout() 在指定的毫秒数后调用函数或计算表达式(只执行一次)
clearTimeout() 取消由setTimeout()方法设置的事件
setInterval() 按照指定时间周期来调用函数或计算表达式(多次)
clearInterval() 取消由setInterval()方法设置的事件
var toggleImg = setInterval(function(){
console.log(1);
}, 1000);
clearInterval(toggleImg)
window对象的属性
history 对history对象的只读引用 window.history
location 对location对象的只读引用 window.location
navigator 对Navifator对象的只读引用 window.navigator
screen 对Screen对象的只读引用 window.screen
Location对象
location.assign() 加载新的文档
location.reload() 重新加载当前文档
location.replace() 用新文档替换当前文档
element.onclick = function(){
location.assign("https://www.baidu.com") //打开新页面 产生记录
}
element.onclick = function(){
location.reload() //刷新页面
}
element.onclick = function(){
location.replace("https://www.baidu.com") //替换当前文档 实现打开新页面功能 不可以返回
}
element.onclick = function(){
location.href("https://www.baidu.com") //打开新页面 产生记录
}
location属性
location.host 获取端口号
location.hostname 只获取主机名
location.href 获取url地址
history对象
history.back() 加载当前history列表前一个url
history.forward() 加载当前history历史记录列表下一个url
history.go() 加载当前history列表中具体页
go(1)前进1页
go(-1)后退1页
浏览器事件对象
window.onload() 对象装载完成后触发
window.onscroll() 窗口滚动条被拖动时触发
window.onresize() 窗口的大小改变时触发
body.clientWidth 获取窗口的宽度
防抖和节流
在进行窗口的resize、scroll、输出狂内容校验等操纵的时候,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常之差,那么为了前端性能的优化,也为了用户更好的体验,就可以采用防抖和节流的方式来达到这种效果,减少调用的频率。
防抖是指当一个动作连续触发,只执行最后一次,好比如打王者荣耀的时候,按下了回城键在等待几秒钟之后,就会执行回城事件,但当你再次按下回城键,回程时间又将重新计时。
节流是指一定时间内js方法只跑一次,比如打王者荣耀时,释放技能都有一段冷却时间,假如一技能冷却时间由5秒,那么在5秒时间内只能释放一次一技能
防抖
防抖:连续触发事件,只执行最后一次
思路:
每次触发时重新开始计时
var time;
element.oninput =function(){
clearTimeout(timer)
timer = setTimeout(function(){
console.log(1)
},1000)
}
节流
每多少秒进行重新加载
思路:
先判断有无定时器,则返回return
把逻辑代码那放到定时器中
定时器到之后,置空定时器变量即可
var timer = nul
element.oninput = function(){
if(timer){
return
}
timer = function(){
console.log(aa)
timer=null
},1000}