Web API基础知识五
滚动事件（scroll）
//页面滚动事件
window.addEventListener('scroll',function(){
//执行的操作
console.log(document.documentElement.scrollTop)//获取当前页面的滚动距离
})
若要监听某个元素的内部滚动直接给某个元素加即可
加载事件（load）
//页面加载事件
window.addEventListener('load',function(){
//执行的操作
//DOMContentLoaded 都加载完毕就触发了,不需要等待标签的内容回来
//video标签一生成 事件就触发
// load事件等待 vide标签生成了，同时 video标签内的视频也加载回来 才触发
// video加载 分两部
// 只是加载标签而已 很快 DOMContentLoaded 快
// 会去加载 标签对应的视频 比较慢 load 慢
})
scroll家族
获取宽高（scrollWidth/scrollHeight）
获取元素的内容总款高（不包含滚动条）
获取位置（scrollLeft和scrollTop）
获取元素内容往左、往上滚出去看不到的距离
offset家族
获取宽高（offsetWidth/offsetHeight）
获取元素自身的宽高（包含滚动条，padding和border
获取位置（offsetLeft和offsetTop）
获取元素距离自己定位父级元素的左、上距离
client家族
获取宽高（clientWidth/clientHeight）
获取元素的可见部分宽高
获取位置（clientLeft和clientTop）
获取左边框和上边框宽度
屏幕大小改变（flexible.js(resize))
div {
width: 1rem;
height: 1rem;
background-color: aqua;
font-size: 1rem;
}
</style>
</head>
<body>
<div>div</div>
<script>
// 页面大小发生变化了就会触发的事件 resize window来绑定
window.addEventListener('resize', function (event) {
console.log('页面大小发生变化了');
// 移动端屏幕适配 rem 淘宝js库，flexible.js 作用 设置html的字体大小 为当前页面的宽度的十分之一
// 获取当前页面的宽度
console.log(document.body.offsetWidth);
// 设置页面html标签的字体大小为屏幕的十分之一
document.documentElement.style.fontSize =
document.body.offsetWidth / 10 + 'px';
// 响应式布局的时候 发一个js文件 方便根据当前页面的宽度 告诉我们屏幕的种类和宽度
const width = document.body.offsetWidth;
if (width > 1200) {
document.querySelector('title').innerText = `大屏幕 ${width}`;
} else if (width > 992) {
document.querySelector('title').innerText = `中等屏幕 ${width}`;
} else if (width > 768) {
document.querySelector('title').innerText = `小屏幕 ${width}`;
} else {
document.querySelector('title').innerText = `极小屏幕 ${width}`;
}
});
</script>
Window对象
1BOM（浏览器对象模型）
window对象下包含5个属性
navigator
location
document（实现DOM的基础）
history
screen
延时器:
// 延时器 - 只会执行一次而已
let timeid = setTimeout(function () {
console.log('猜猜我是谁');
}, 5000);
// 取消延时器
clearTimeout(timeid);
递归现象(一个函数调用自己):
1 一个函数调用自己
2 使用场景
有一个函数，可以打印出 一个dom元素的所有祖先元素
不可能提前知道 这个a标签有多少个父元素
这个函数接收一个参数，= dom
如果这个dom元素有父元素，就继续调用自己函数
let index = 0;
function func() {
index++;
console.log(index);
func();
}
location
1.href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转 2.search 属性获取地址中携带的参数，符号 ？后面部分 3.hash 属性获取地址中的啥希值，符号 # 后面部分 4.reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新
//获取完整地址
console.log(location.href)
//获取地址中携带的参数，符号？后面部分
console.log(location.search)
//获取地址中哈希值,符号#后面部分
console.log(location.hash)
//用来刷新当前页面
console.log(location.reload)
navigator
navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息
可以通过userAgent检测浏览器的版本及平台
histroy
history 的数据类型是对象，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等
back( ) ----可以后退功能
forward( )-----前进功能
go( 参数 )-----前进后退功能 参数如果是1则前进1个页面,-1则后退一个页面
<a href="http://www.baidu.com">百度</a>
<button class="one">前进</button>
<button class="two">后退</button>
<script>
let one = document.querySelector('.one')
one.addEventListener('click',function(){
// history.forward()
history.go(1)//前进一个记录
})
two.addEventListener('click',function(){
// history.back()
history.go(-1)//后退一个记录
})
</script>
