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) | 指针移出元素范围外（不冒泡）。

自定义事件

开发者可以在自带事件之外，自定一个事件

示例代码