什么是DOM事件
官方解释和描述是DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素节点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。
DOM事件三个阶段
1：一开始从文档的根节点流向目标对象（捕获阶段）
2：然后在目标对向上被触发（目标阶段）
3：之后再回溯到文档的根节点（冒泡阶段
如今我们的浏览器支持先捕获，再冒泡。
阻止事件冒泡or阻止事件捕获呢？
答案想而易见，我们有阻止事件冒泡，没有阻止事件捕获。 事件冒泡过程可以被阻止，可以通过:stopPropabation ()来阻止允许冒泡事件的冒泡；
前提：注意这里有一个前提是这个事件是bubble（yes)，允许cancelable(yes)，我们才能进行冒泡事件阻止。
scroll 事件
scroll 事件是不允许阻止取消的，也就是cancelable（no），但是通常我们可以通过以下方式改变：
wheel.stopPropogation(); touchstatr.stopPropogation();
css 修改width：0；overflow：hidden；
自定义事件
button1.addEventListener('click'.()=>{
const event = new CustomEvent('xxx',{'detail':{naem:'xxx',age:'18'}})
button1.dispatchEvent(event)})
button1.addEventListener('frank',(e)=>{
console.log.(e)})
}
特殊情况
只有一个div被监听时，fn分别在捕获和冒泡阶段监听click事件时，用户点击的元素就是开发者监听的元素。
div.addEventListener('click',f1)
div.addEventListener('click',f2,true)
谁先监听谁先执行，因为是在同级元素。
target V.S. currentTarget
*区别 e.target是用户操作的元素 e.currentTarget 程序员监听的元素 *举例 div>span{文字}用户点击文字 e.target 就是span e.currentTarget就是div
DOM事件委托
什么时候需要用到DOM事件委托呢？ 场景一：
需要监听100个按钮，可以监听这100个按钮的祖先，等冒泡时判断是不是这100个按钮中的一个
场景二：
当你要监听目前步存在的元素的点击事件时可以进行事件委托。
好处： 省监听数（内存） 可以监听动态元素
