Web APIs - 事件### 1事件流
事件流是对事件执行过程的描述，了解事件的执行过程有助于加深对事件的理解，提升开发实践中对事件运用的灵活度。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mdLAQsgb-1680685228964)(./assets/event.png)]
任意事件被触发时总会经历两个阶段：【捕获阶段】和【冒泡阶段】。
- 捕获阶段是【从父到子】的传导过程
- 冒泡阶段是【从子向父】的传导过程
1.1捕获
从dom根元素依次指向内部的元素
语法
document.addEventListener('click', function () {
alert('我是爷爷')
},true)
fa.addEventListener('click', function () {
alert('我是爸爸')
},true)
son.addEventListener('click', function (e) {
alert('我是儿子')
},true)
1.2 冒泡
当一个元素的事件触发，**同样的事件**将会在该元素所有的祖先元素中依次触发(由子到父的触发)
document.addEventListener('click', function () {
alert('我是爷爷')
})
fa.addEventListener('click', function () {
alert('我是爸爸')
})
son.addEventListener('click', function (e) {
alert('我是儿子')
})
结论：
addEventListener第3个参数决定了事件是在捕获阶段触发还是在冒泡阶段触发addEventListener第3个参数为true表示捕获阶段触发，false表示冒泡阶段触发，默认值为false- 事件流只会在父子元素具有相同事件类型时才会产生影响
- 绝大部分场景都采用默认的冒泡模式（其中一个原因是早期 IE 不支持捕获）
1.3阻止冒泡
- 阻止冒泡是指阻断事件的流动，保证事件只在当前元素被执行，而不再去影响到其对应的祖先元素。
- 组织流动传播 事件对象.stopPropagation()
document.addEventListener('click', function () {
alert('我是爷爷')
})
fa.addEventListener('click', function () {
alert('我是爸爸')
})
son.addEventListener('click', function (e) {
alert('我是儿子')
// 组织流动传播 事件对象.stopPropagation()
e.stopPropagation()
})
结论：
事件对象中的 ev.stopPropagation 方法，专门用来阻止事件冒泡。
1.4 事件移除
// L0 事件移除解绑
btn.onclick = null
function fn() {
alert('点击了')
}
btn.addEventListener('click', fn)
// L2 事件移除解绑
btn.removeEventListener('click', fn)
补充：
鼠标经过事件：
mouseover 和 mouseout 会有冒泡效果
mouseenter 和 mouseleave 没有冒泡效果 (推荐)
- 传统事件流 L0
- 时间注册监听 L2
- 匿名函数无法被移除
2事件委托
事件委托是利用事件流的特征解决一些现实开发需求的知识技巧，主要的作用是提升程序效率。(事件冒泡)
- ul 中1000个小li，li点击事件吃资源，给父元素ul添加点击事件，此时li没有点击事件，点击小li。冒泡到父元素执行
2.1事件委托前
<script>
// 假设页面中有 10000 个 button 元素，大量的事件监听是比较耗费性能的
const buttons = document.querySelectorAll('table button');
for(let i = 0; i <= buttons.length; i++) {
// 为 10000 个 button 元素添加了事件
buttons.addEventListener('click', function () {
// 省略具体执行逻辑...
})
}
</script>
利用事件流的特征，优化，事件的的冒泡模式总是会将事件流向其父元素的，
如果父元素监听了相同的事件类型，那么父元素的事件就会被触发并执行，正是利用这一特征对上述代码进行优化，如下代码所示：
2.2事件委托后
<script>
// 假设页面中有 10000 个 button 元素
const buttons = document.querySelectorAll('table button')
// 假设上述的 10000 个 buttom 元素共同的祖先元素是 table,给父元素添加绑定事件
const parents = document.querySelector('table')
parents.addEventListener('click', function (ev) {
// console.log(ev.target);
// 只有 button 元素才会真正去执行逻辑
if(ev.target.tagName === 'BUTTON') {
// 执行的逻辑
}
})
</script>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TiSKJJCu-1680685228966)(assets/event.png)]
- 事件对象中的属性
target或srcElement属性表示真正触发事件的元素，它是一个元素类型的节点。 - 找到正常触发的元素 e.target.tagName
2.3 阻止元素默认行为
const form = document.querySelector('form')
form.addEventListener('submit', function (e) {
// 阻止默认行为 提交
e.preventDefault()
})
案例–事件委托tab栏切换
<script>
// 采取事件委托的形式 tab栏切换
// 1. 获取 ul 父元素 因为 ul只有一个
const ul = document.querySelector('.tab-nav ul')
// 获取 5个 item
const items = document.querySelectorAll('.tab-content .item')
// 2. 添加事件
ul.addEventListener('click', function (e) {
// console.log(e.target) // e.target是我们点击的对象
// 我们只有点击了 a 才会 进行 添加类和删除类操作
// console.log(e.target.tagName) // e.target.tagName 点击那个对象的 标签名
if (e.target.tagName === 'A') {
// console.log('我选的是a')
// 排他思想 ，先移除原来的active
document.querySelector('.tab-nav .active').classList.remove('active')
//当前元素添加 active 是 e.target
// this 指向ul 不能用this
e.target.classList.add('active')
// 下面大盒子模块
// console.log(e.target.dataset.id)
const i = +e.target.dataset.id
// 排他思想 ，先移除原来的active
document.querySelector('.tab-content .active').classList.remove('active')
// 对应的大盒子 添加 active
// document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add('active')
items[i].classList.add('active')
}
})
</script>
3其他事件
3.1页面加载事件
加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件
有些时候需要等页面资源全部处理完了做一些事情
事件名：load
给window添加 监听整个页面资源
//等待页面的所有资源（图片 样式等）加载完 再执行回调函数
window.addEventListener('load', function() {
// xxxxx
})
事件名：DOMContentLoaded
//等待页面的资源加载完（不需要等图片 样式 只要加载标签就可以 ） 再执行回调函数 ，加载的时间更短
document.addEventListener('DOMContentLoaded', function() {
// xxxxx
})
3.2元素滚动事件
滚动条在滚动的时候持续触发的事件，也可以该元素添加（scroll 检测滚动的距离）
- 被卷去了多少 scrollTop 得到的是数值 没有单位 可读写
- 获取html元素写法 // document.documentElement
- 获取页面滚动了多少 // console.log(document.documentElement.scrollTop)
window.addEventListener('scroll', function() {
// xxxxx
})
3.3页面尺寸事件
resize 浏览器窗口大小发生变化的时候触发的事件
window.addEventListener('resize', function() {
// xxxxx
})
3.4元素尺寸与位置
尺寸
- offsetWidth和offsetHeight 获取元素的自身宽高、包含元素自身设置的宽高、padding、border
- 获取的是可视宽高, 如果盒子是隐藏的,获取的结果是0
- 获取出来的是数值,方便计算
位置
- offsetTop和offsetLeft 获取元素距离自己定位父元素 顶部和左边的宽度
- 适度属性
- 受到定位的影响，看最近的定位是否由定位，如果有则是距离 定位盒子的位置 如果没有则是屏幕左上角
- getBoundingClientRect() 方法获取位置 相对与当前的视口(屏幕的大小)
- clienttWidth和clientHeight 获取元素的自身宽高、 不包含元素自身设置的宽高、padding、border
案例
模仿新浪导航： 滑动位置的变化 实现导航的显示与隐藏
技术
- offsetTop 计算盒子的位置 默认没有单位
- 显示与隐藏 使用top属性 添加单位
模仿哔哩哔哩： 页面位置的计算，滚动条的位置变化
技术
- 事件委托
- 实现底部的小短线 一个盒子 移动 transform translate
- offsetLeft 计算小短线向右移动的距离
总结
scrollLeft scrollTop clientWidth clientHeight offsetWidth offsetHeight offsetLeft offsetTop
综合案例—电梯导航----※
技术
1.页面滑动 */
html { scroll-behavior: smooth; } /* 让滚动条丝滑的滚动 */
2.之前没有active 类，解决报错问题 if 循环
const old = document.querySelector('.xtx-elevator-list .active')
// 判断 如果原来有active类的对象，就移除类，如果开始就没有对象，就不删除，所以不报错
if (old) old.classList.remove('active')
// 当前元素添加 active
e.target.classList.add('active')
3.电梯点击跳转
/ 获得对应大盒子的 offsetTop
const top = document.querySelector(`.xtx_goods_${e.target.dataset.name}`).offsetTop
// 让页面滚动到对应的位置
document.documentElement.scrollTop = top
4.自定义属性，大盒子点击电梯 属性选择器 获取小盒子 添加active 属性
const n = document.documentElement.scrollTop
if(n > news.offsetTop && n < popular.offsetTop){
document.querySelector('[data-name=new]').classList.add('active')
}