DOM事件模型
先提出一个问题
<div class="grandfater">
<div class="father">
<div class="son">
文字
</div>
</div>
</div>
给三个div分别添加事件监听fnYe/fnBa/fnEr,点击文字，最先调用 fnYe / fnBa / fnEr 中的哪一个函数？
答案是都可以。
这就引出了DOM的事件模型问题。
DOM事件模型
2002年W3C发布了标准，文档名为 DOM Level 2 Events Specification规定浏览器应该同时支持两种调用顺序。首先按爷爷=>爸爸=>儿子的顺序看有没有函数监听，然后按儿子=>爸爸=>爷爷的顺序看有没有函数监听，如果有监听函数就调用，并提供事件信息，没有则跳过。
从外向内找监听函数，叫事件捕获，
从内向外找监听函数，叫事件冒泡。
开发者自己选择把fnYe放在捕获阶段或者冒泡阶段
如图所示：
截屏2022-07-26 09.37.26.png
addEventListener
事件绑定API
EventTarget.addEventListener()用于在当前节点或对象上，定义一个特定事件的监听函数。一旦这个事件发生，就会执行监听函数。该方法没有返回值。
target.addEventListener(type, listener[, useCapture]);
该方法接受三个参数。
type：事件名称，大小写敏感。
listener：监听函数。事件发生时，会调用该监听函数。
useCapture：布尔值，表示监听函数是否在捕获阶段（capture）触发，默认为false（监听函数只在冒泡阶段被触发）。
- IE5:
div.attachEvent('click', fn) //冒泡阶段 - 网景:
div.addEventListener('click', fn)//捕获阶段 - W3C:
div.addEventListener('click', fn,bool) //通过布尔值判断是捕获阶段还是冒泡阶段调用函数
如果bool不传或者为falsy值，那么就让fn走冒泡，即浏览器在冒泡阶段发现目标div有fn监听函数，就会调用fn，并且提供事件信息。
如果bool为true，就让fn走捕获，即浏览器在捕获阶段发现目标div有fn监听函数，就会调用fn，并且提供事件信息。
W3C事件模型
截屏2022-07-26 10.18.01.png
先捕获（爸爸=>儿子）再冒泡（儿子=>爸爸），注意e对象被传给所有监听函数，事件结束后e对象也不复存在了
target v.s. currentTarget
e.target - 用户操作的元素
e.currentTarget - 程序员监听的元素
举例：
<!--当用户点击文字的时候-->
<div>
<!--e.currentTarget就是div-->
<span>文字</span>
<!--e.target就是span-->
取消冒泡
捕获不可取消，但冒泡可以e.stopPropagation()可中断冒泡，浏览器不再向上走
一般用于封装某些独立的组件
有些默认动作无法阻止
MDN 搜索 scroll event，看到 Bubbles 和 CancelableBubbles 的意思是该事件是否冒泡，所有冒泡都可取消
Cancelable 的意思是开发者是否可以阻止默认事件
Cancelable 与冒泡无关
图片1.png
scroll 事件不可阻止默认动作阻止 scroll 默认动作没用，因先有滚动才有滚动事件 要阻止滚动，可阻止 wheel 和 touchstart 的默认动作
x.addEventListener('wheel', (e) => {
e.preventDefault()
})
x.addEventListener('touchstart', (e) => {
e.preventDefault()
})
但是滚动条还能用，可用 CSS 让滚动条 width: 0
CSS 方法 overflow: hidden 可以直接取消滚动条 但此时 JS 依然可以修改 scrollTop
自定义事件
浏览器自带100多种事件，MDN可查,举几个例子：
click (en-US)| 在元素上按下并释放任意鼠标按键。
contextmenu (en-US) | 右键点击（在右键菜单显示前触发）。
dblclick (en-US) | 在元素上双击鼠标按钮。
mousedown (en-US) | 在元素上按下任意鼠标按钮。
mouseenter (en-US) | 指针移到有事件监听的元素内。
mouseleave (en-US) | 指针移出元素范围外（不冒泡）。
自定义事件
开发者可以在自带事件之外，自定一个事件
