解绑事件
on事件方式，直接使用null覆盖偶就可以实现事件的解绑
btn.onClick = function() {
alert('点击了')
}
// 解绑
btn.onClick = null
addEventListener方式，必须使用：removeEventListener(事件类型, 事件处理函数, [获取捕获或者冒泡阶段])
注意：匿名函数无法被解绑
举例说明：
function fn() {
alert('点击了')
}
btn.addEventListener('click', fn)
// L2 事件移除解绑
btn.removeEventListener('click', fn)
页面加载事件
有些时候需要等页面资源全部处理完了做一些事情
老代码喜欢把 script 写在 head 中，这时候直接找 dom 元素找不到
事件名：load
加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件
监听页面所有资源加载完毕：
举例说明：
注意：不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件
window.addEventListener('load', function () {
// 执行的操作
})
img.addEventListener('load', function () {
// 等待图片加载完毕，再去执行里面的代码
})
事件名：DOMContentLoaded
当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载
监听页面DOM加载完毕：
举例说明：
// 给 document 添加 DOMContentLoaded 事件
document.addEventListener('DOMContentLoaded', function () {
// 执行的操作
})
区别：
- load：
- 监听整个页面资源给
window加
- 监听整个页面资源给
- DOMContentLoaded：
- 给
document加 - 无需等待样式表、图像等完全加载
- 给
元素滚动事件
事件名：scroll
监听整个页面滚动
举例说明：
window.addEventListener('scroll', function () {
// 执行的操作
})
//给window 或 doucument 添加 scroll 事件
注意：监听某个元素的内部滚动直接给某个元素加即可
- 使用场景：
- 想要页面滚动一段距离，比如100px，就让某些元素显示隐藏
- 就可以使用scroll来检测滚动的距离
- 获取位置
- scrollLeft
- scrollTop
获取位置
- scrollLeft和scrollTop （属性）
获取被卷去的大小
获取元素内容往左、往上滚出去看不到的距离
这两个值是可读写的
尽量在scroll事件里面获取被卷去的距离
举例说明：
div.addEventListener('scroll', function () {
console.log(this.scrollTop)
})
window.addEventListener('scroll', function () {
// 我想知道页面到底滚动了多少像素，被卷去了多少 scrollTop
// 获取html元素写法
// document.documentElement
console.log(document.documentElement.scrollTop)
})
- scrollTo() 方法可把内容滚动到指定的坐标
语法：元素.scrollTo(x, y)
例如
页面尺寸事件
resize会在窗口尺寸改变时触发事件
window.addEventListener('resize', function () {
// 执行的代码
})
获取宽高：
获取元素的可见部分宽高（不包含边框，margin，滚动条等）
clientWidth和clientHeight
举例说明：
// 检测屏幕宽度
window.addEventListener('resize', function () {
let w = document.documentElement.clientWidth
console.log(w)
})
元素尺寸与位置
获取宽高offsetWidth和offsetHeight
获取元素的自身宽高、包含元素自身设置的宽高、padding、border
获取出来的是数值,方便计算
注意: 获取的是可视宽高, 如果盒子是隐藏的,获取的结果是0
获取位置
offsetLeft和offsetTop
获取元素距离自己定位父级元素的左、上距离
const p = document.querySelector('p')
// 检测盒子的位置 最近一级带有定位的祖先元素
console.log(p.offsetLeft)
注意：是只读属性
element.getBoundingClientRect()
const div = document.querySelector('div')
console.log(div.getBoundingClientRect())
方法返回元素的大小及其相对于视口的位置
