DOM 事件进阶
- 事件流
- 事件委托
- 其他事件
- 元素尺寸与位置
一.事件流
- 事件流与两个阶段说明
- 事件捕获
- 事件冒泡
- 阻止冒泡
- 解绑事件
1.1 事件流与两个阶段说明
① 事件流：指的是事件完整执行过程中的流动路径
② 事件流分为捕获阶段和冒泡阶段
1.2 事件捕获
- 从DOM根元素开始去执行对应的事件（从外到里）
- 代码： DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制)
- 说明：addEventListener第三个参数传入true代表是捕获阶段触发（很少使用），如果不屑，默认就是false,false代表冒泡阶段触发
- 如果用L0事件监听，只有冒泡阶段，没有捕获
1.3 事件冒泡
- 当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发，这一过程被称为事件冒泡
- 简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的同名事件
- 事件冒泡是默认存在的
- L2事件监听第三个参数是false,或者默认都是冒泡
1.4 阻止冒泡
① 问题：如果默认就有冒泡模式的存在，所以容易导致事件影响到父级元素，如果想把事情就限制在当前元素内，就需要阻止事件冒泡
② 阻止冒泡需要拿到事件对象
③ 语法：对象.e.stopPropagation()
④ 此方法可以阻断事件流动传播，不光在冒泡阶段有效，在捕获阶段也有效
1.5 解绑事件
① on事件方式：直接使用null覆盖就可以实现事件的解绑
② addEventListener方式，必须使用 removeEventListener(事件类型，事件处理函数，[获取捕获或者冒泡])
const btn = document.querySelector('button')
function fn() {alert('点击了')
}
btn.addEventListener('click', fn)
// 匿名函数不能解绑
btn.removeEventListener('click', fn)1.6 鼠标经过事件的区别
- mouseover 和 mouseout 有冒泡效果
- mouseenter 和 mouseleave 没有冒泡效果（推荐）
1.7 两种注册事件的区别
① 传统on注册（L0）
- 同一个对象，后面注册的事件会覆盖前面注册（同一个事件）
- 直接使用null覆盖就可以实现事件的解绑
- 都是冒泡阶段执行的
② 事件监听注册（L2）
- 语法：addEventListener(事件类型，事件处理函数，是否使用捕获机制)
- 后面注册的事件不会覆盖前面注册的事件（同一个事件）
- 可以通过第三个参数去确定在冒泡或捕获阶段执行
- 必须使用 removeEventListener(事件类型，事件处理函数，[获取捕获或者冒泡])
- 匿名函数无法被解绑
二.事件委托
① 事件委托是利用事件流的特征解决一些开发需求的知识技巧
② 优点
- 减少注册次数，提高程序性能
③ 事件委托：利用事件冒泡的特点，给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件
<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><p>无需变色<p></ul><script>// 给父元素添加事件,触发子元素const ul = document.querySelector('ul')ul.addEventListener('click', function(e) {// 真正触发元素if (e.target.tagName === 'LI') {e.target.style.color = 'red'}})</script>三.其他事件
3.1 阻止冒泡
① 某些情况下组要阻止默认行为的发生，比如阻止链接的跳转，表单域跳转
② 语法：e.preventDefault()
代码：
<form action="http://www.baidu.com"><input type="submit" value="免费注册"></form><a href="http://www.baidu.com">百度一下</a><script>const form = document.querySelector('form')form.addEventListener('submit', function(e) {e.preventDefault()})const a = document.querySelector('a')a.addEventListener('click', function(e) {e.preventDefault()})</script>3.2 页面加载事件
① 概念：加载外部资源，加载完毕时触发的事件
② 为什么要学：
- 有时候需要等页面资源全部处理完了做一些事情
- 老代码喜欢把script写到head中，这时候直接找dom元素找不到
③ 事件名：load
④ 监听页面所有资源加载完毕
- 给window添加load事件
window.addEventListener('load', function () {const btn = document.querySelector('button')btn.addEventListener('click', function () {alert('hello')})
})- 不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件
⑤ DOMContentLoaded
- 当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，无序等到样式表和图像完全加载
- 事件：DOMContentLoaded
- 给document添加 DOMContentLoaded 事件
document.addEventListener('DOMContentLoaded', function () {const btn = document.querySelector('button')btn.addEventListener('click', function () {alert('hello')
})
})3.3 页面滚动事件
① 滚动条在滚动的时候持续触发的事件
② 很多网页需要检测用户把页面滚动到某个区域之后做一些处理，比如返回顶部或者固定导航栏
③ 事件名：scroll
④ 监听整个页面滚动: 给window或document 添加scroll事件
⑤ 监听某个元素内部滚动直接给某个元素添加即可
// scrollLeft 和 scrollTop
① 获取被卷去的大小
② 获取元素往左，往上滚出去看不到的距离
③ 这两个值都是可读写的
document.documentElement.scrollTop = 800const div = document.querySelector('div')window.addEventListener('scroll', function() {// 必须写到里面,得到的是一个数字型,不带单位const n = document.documentElement.scrollTopconsole.log(n)if (n >= 100) {div.style.display = 'block'} else {div.style.display = 'none'}})3.4 页面尺寸事件
① 会在窗口尺寸改变的时候触发事件
② resize
const div = document.querySelector('div')console.log(div.clientWidth)window.addEventListener('resize', function() {console.log('hahah')})③ 检测屏幕宽度
- 获取元素的可见部分宽高（不包含边框，margin, 滚动条）
- clientWidth和clientHeight
四.元素的尺寸与位置
- 获取宽高
① 获取元素自身的宽和高，包含元素自身设置的宽高，padding，border
② offsetWidth 和 offsetHeight
③ 包含边框
- 获取位置
① 获取元素距离自己定位父级元素的左，上距离
② offsetLeft和pffsetTop 这两个是只读属性
