什么是DOM
什么是DOM事件？
- 举例，click就是一个事件，可以在后面绑定函数执行功能。事件可以在文档(Document)结构的任何部分被触发，触发者可以是用户操作，也可以是浏览器本身。事件并不是只是在一处被触发和终止；他们在整个document中流动，拥有它们自己的生命周期。
DOM事件与事件委托
编程接口
点击事件
- 首先从外到内找监听函数，叫事件捕获
- 然后从内到外找监听函数，叫冒泡捕获
- 示意图
addEventListener
- 事件绑定API
- 选择器（例：baba yeye 等）.addEventLitener('click',fn,bool)
- 如果bool不传或者为falsy,就让fn走冒泡，先调用子元素的监听函数
- 如果bool为ture,就让fn走捕获，先调用父元素的监听函数
target与currentTarget区别
- e.target 是用户操作的元素
- currentTarget 是程序员监听的元素
- 举例
<div><span>你好</span></div>
当用户点击文字 e.target 就是span e.currentTarget就是div
取消冒泡的情况
- e.stopPropagation()可以中断冒泡。这票干完就不通知后面的人了，狭义的说即挂在冒泡顺序里的监听函数不被执行。捕获无法取消，因为DOM是一颗树，根一定在的。只有顺着根不断发展。
- e.stopPropagation 可以取消冒泡
- 一般用于封装某些独立的组件
- MDN查询 scorr 冒泡是否能被取消
- Bubbles 为该事件是否为冒泡
- Cancelable 为开发者是否可以取消冒泡
取消滚动
x.addEventListener('wheel', (e)=>{
console.log(2)
e.preventDefault()
})
更多事件 示例：developer.mozilla.org/zh-CN/docs/…
事件委托
名字挺起来还是挺有意思的,其实理解起来也很简单——父节点嵌套的子节点的触发的事件会通过事件冒泡到达父节点，事件处理程序不直接绑定到子节点，统一由公共父节点进行事件监听。
- 举例 ：给100个按键添加点击事件
div1.addEventListener('click', (e) =>{
const t = e.target
if(t.tagName.toLowerCase() ==='button'){
console.log('触发点击事件')
console.log(t.textContent)
}
})
- 依次点击结果为
