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

自定义事件

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

示例代码

推荐阅读更多精彩内容