clientX/clientY 获取鼠标相对于浏览器可见窗口左上角的位置
offsetX/offsetY 获取鼠标相对于当前DOM元素左上角的位置
<script>
// 获取按钮
const btn = document.querySelector('div');
btn.addEventListener('mousemove', function (event) {
// console.log(event.type); // 输出当前的事件类型 少用
// console.log(event.clientX,event.clientY ); // 返回 鼠标的位置-参照物 页面的左上角即可
console.log(event.offsetX,event.offsetY);// 返回鼠标的坐标，参照物 是被点击的元素的左上角
});
</script>
load事件 --等待页面全部标签加载完毕 包括所有的外网资源 图像视频
window.addEventListener('load', function () {
console.log('load 标签加载完毕-标签对应外部资源加载完毕');
});
DOMContentLoaded事件
1. 标签加载完毕就触发
2. 不会等待标签对应内容（图像、视频资源）加载完毕才触发
document.addEventListener("DOMContentLoaded",function () {
console.log("DOMContentLoaded 标签加载完毕就触发了");
})
元素位置和大小 三大家族
1. scroll 家族
1.scrollWidth/scrollHeight 滚动容器的宽度/高度 （不包含滚动条）
2.scrollLeft\scrollTop 滚动条水平/垂直方向的滚动距离（可以读取，也可以修改（赋值））
scrollWidth 不包含 滚动条 大小
scrollWidth 等于容器可以滚动的大小
*/
const scrollDom = document.querySelector('.scroll-dom');
// 输出它宽度高度
console.log(scrollDom.scrollWidth);
// console.log(scrollDom.scrollHeight);
// 获取当前容器滚动了的距离
scrollDom.addEventListener('scroll', function () {
// console.log(this.scrollTop);// 获取当前容器的滚动距离
console.log(this.scrollLeft); // 获取当前容器的滚动距离
});
1 页面滚动 使用 window.addEventListener("scroll") 事件
2 页面的滚动距离 document.documentElement.scrollTop
1 元素滚动 dom.addEventListener("scroll")
2 获取元素滚动的距离
dom.scrollTop
dom.scrollLeft
3 scrollWidth 整个可以滚动的区间的宽度
4 scrollHeight 整个可以滚动的区域的高度
小细节 PC端的滚动条大小 17px
小细节 移动端的滚动条 不占大小
2. offset 家族
1. offsetWidth\offsetHeight 容器的可视区域的宽度\高度（自身宽高、padding、border）-包含滚动条
2. offsetLeft\offsetTop 距离自己定位父级元素的左、上距离（只读属性）
const offsetDom = document.querySelector('.offset');
// 获取宽度和高度 包含这滚动条的大小
console.log(offsetDom.offsetWidth);// 300
console.log(offsetDom.offsetHeight);// 300
// console.log(offsetDom.scrollWidth); // 283
// console.log(offsetDom.scrollHeight);// 283
// 获取当前元素距离 定位了的父元素的大小(找不到定位了的父元素，相对于页面来计算)
console.log(offsetDom.offsetLeft);
console.log(offsetDom.offsetTop);
总结 offset家族
1 offsetWidth 获取元素的宽度 包含这滚动条
2 offsetHeight 获取元素的高度 包含这滚动条
3 offsetLeft 获取定位了的父元素的 水平距离 左
4 offsetTop 获取定位了的父元素的 垂直距离 上
3. client 家族
1. clientWidth\clientHeight 元素的可见部分宽高（不包含边框，滚动条等）
2. clientLeft\clientTop 左边框和上边框宽度(只读属性)
const clientDom = document.querySelector('.client');
// 宽度和高度
console.log(clientDom.clientWidth); // 不包含 滚动条（类似 scrollWidth）
console.log(clientDom.clientHeight); // 不包含 滚动条（类似 scrollHeight）
// 获取边框的大小
console.log(clientDom.clientLeft); // 左边框
console.log(clientDom.clientTop); // 上边框
// scollWidth 获取容器的宽度（包含滚动的区域）
// offsetWidth 获取可视区域的宽度（包含滚动条）
// clientWidth 获取可视区域的宽度（不包含滚动条）
// scrollLeft 获取左侧滚动的距离
// offsetLeft 获取和已经定位了的父级元素的左距离
// clientLeft 获取左边框的大小
屏幕大小改变事件resize(window)
<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>
location对象
location 的数据类型是对象，它拆分并保存了 URL 地址的各个组成部分
常用属性和方法：
href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转
search 属性获取地址中携带的参数，符号 ？后面部分
hash 属性获取地址中的啥希值，符号 # 后面部分
reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新
const button = document.querySelector('button');
button.addEventListener('click', function () {
// location.href="http://www.baidu.com";
// console.log(location.href);// http://127.0.0.1:5500/17-location.html
// 刷新功能
// location.href = location.href; // 刷新功能
// reload实现刷新
// location.reload(true);// true 强制刷新！
console.log(location.hash);
});
navigator对象
navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息
常用属性和方法：
通过 userAgent 检测浏览器的版本及平台 检测 userAgent（浏览器信息）
!(function () {
const userAgent = navigator.userAgent
// 验证是否为Android或iPhone
const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
// 如果是Android或iPhone，则跳转至移动站点
if (android || iphone) {
location.href = 'http://m.itcast.cn'
}
})()
