理解 DOM 事件流

xqslsm2024-01-08 16:52

DOM2 Events 规范规定事件流分为3个阶段：事件捕获、到达目标、事件冒泡。虽然 DOM2 Events 规范规定的事件流是从 document 开始，但实际上，所有浏览器都是从 window 对象就开始了。

下面的代码均在一个空白的宽高100%的页面中演示，点击的元素均为body

EventTarget

在理解事件流之前，需要先理解 EventTarget。为什么要先理解EventTarget？因为注册事件监听器（处理程序），大多通过addEventListener或onevent这两种方式。而addEventListener其实就是EventTarget.prototype上的方法。主要包括addEventListener、removeEventListener、dispatchEvent。

为什么DOM元素、window对象都可以使用addEventListener注册事件监听器，是因为他们都继承了EventTarget，包括XMLHttpRequest、AudioNode 和 AudioContext等等。同时也都支持通过onevent注册事件监听器。

javascript 复制代码 
const { addEventListener } = EventTarget.prototype

window.addEventListener === addEventListener
document.body.addEventListener === addEventListener
XMLHttpRequest.prototype.addEventListener === addEventListener
AudioNode.prototype.addEventListener === addEventListener
AudioContext.prototype.addEventListener === addEventListener

以上结果均为 true

addEventListener方法用于注册事件监听器，removeEventListener方法移除事件监听器，dispatchEvent方法触发事件监听。

javascript 复制代码 
function fn() {
  console.log('事件监听')
}

document.body.addEventListener("click", fn)
const event = new Event('click')

setTimeout(function () {
  // 模拟点击事件，或 document.body.click()   
  document.body.dispatchEvent(event)
}, 1000)

setTimeout(function () {
  document.body.removeEventListener('click', fn)
}, 2000)

setTimeout(function () {
  document.body.dispatchEvent(event)
}, 3000)

1秒后打印事件监听，2秒后移除fn这个事件监听，因此3秒后不会再次打印。 其实如果从设计模式的角度理解，这就是一个简单的发布订阅模式，就像Vue中的$on、$off、$emit。addEventListener对应$on，也可以通过参数配置实现$once的功能，removeEventListener对应$off，dispatchEvent对应$emit。

事件流

addEventListener

文章开头提到，事件流分为3个阶段：事件捕获、到达目标、事件冒泡。在使用addEventListener注册事件监听器的时候，可以通过参数配置，添加到捕获还是冒泡阶段，默认注册到冒泡阶段。

javascript 复制代码 
// 点击 document.body，document.body 为目标元素
window.addEventListener("click", function () {
  console.log('window clicked 事件冒泡阶段')
})

document.addEventListener("click", function () {
  console.log('document clicked 事件冒泡阶段')
})

document.body.addEventListener("click", function () {
  console.log('document.body clicked 事件冒泡阶段')
})

window.addEventListener("click", function () {
  console.log('window clicked 事件捕获阶段')
}, true)

document.addEventListener("click", function () {
  console.log('document clicked 事件捕获阶段')
}, true)

document.body.addEventListener("click", function () {
    console.log('document.body clicked 事件捕获阶段')
}, true)

当body触发点击事件时，打印结果如下：

javascript 复制代码 
window clicked 事件捕获阶段
document clicked 事件捕获阶段
document.body clicked 事件捕获阶段
document.body clicked 事件冒泡阶段
document clicked 事件冒泡阶段
window clicked 事件冒泡阶段

在调用addEventListener方法，第三个参数传入了true（默认为false）时，事件监听器被注册了冒泡阶段，按照事件流执行的顺序，先是事件捕获阶段，到达document.body目标元素后，再向上冒泡，进入到事件冒泡阶段，因此打印结果如上所示。对于现在的浏览器来说，事件流是一个完整的流程，不会说只触发事件捕获，或者只触发事件冒泡，而是到达哪个阶段就执行哪个阶段注册的事件监听器。因此想在哪个阶段触发事件，就将事件监听注册到哪个阶段。

但对于到达目标阶段有点特殊。虽然 DOM2 Events 规范明确捕获阶段不命中事件目标，但现在的浏览器都会在捕获阶段在事件目标上触发事件，因此事件目标在事件捕获、事件冒泡阶段都会处理事件。就像document.body clicked 事件捕获阶段所在的事件可以理解为在事件捕获阶段处理，而document.body clicked 事件冒泡阶段所在的事件在事件冒泡阶段处理。

在使用addEventListener注册事件监听时，需要注意两点：

  • 在同一阶段，传入同一个函数多次注册事件监听时，只会注册一次。
javascript 复制代码 
function handleClick(){
  console.log('事件监听')
}

document.body.addEventListener("click", handleClick)

// 再次添加
document.body.addEventListener("click", handleClick)

点击一次，handleClick这个方法只会执行一次。

javascript 复制代码 
function handleClick(){
  console.log('事件监听')
}

document.body.addEventListener("click", handleClick)

// 再次添加
document.body.addEventListener("click", handleClick)

// 再次添加到捕获阶段
document.body.addEventListener("click", handleClick, true)

点击一次，handleClick方法触发两次，捕获阶段一次，冒泡阶段一次。

  • addEventListener方法传入一个匿名函数时，事件监听无法被移除。
javascript 复制代码 
document.body.addEventListener("click", function handleClick(){
  console.log('事件监听')
})

// error
document.body.removeEventListener('click', handleClick)

上面的代码会报错，removeEventListener方法第二个参数需要接收一个函数引用，而handleClick这个函数名，只在handleClick这个函数内部可用。

onevent

除了通过addEventListener注册事件监听以外，还可以通过元素的onevent属性添加，on加上事件类型，例如onclick、onload。

javascript 复制代码 
document.body.addEventListener("click", function () {
  console.log('document.body clicked 事件捕获阶段')
}, true)

document.body.addEventListener("click", function () {
  console.log('document.body clicked 事件冒泡阶段')
})

document.body.onclick = function(){
  console.log('document.body clicked 事件冒泡阶段-onclick')
}

当body触发点击事件时，打印结果如下：

javascript 复制代码 
document.body clicked 事件捕获阶段
document.body clicked 事件冒泡阶段
document.body clicked 事件冒泡阶段-onclick

上面的代码中为document.body.onclick属性赋值了一个匿名函数，可以看到这个事件在事件冒泡阶段被处理。以onevent这种方式添加的事件处理程序，都是会注册到事件流的冒泡阶段。既然onevent是以属性的方式添加，那么最多也就只能添加一个，再次添加会被覆盖，可以通过设置属性为null的方式移除监听，例如document.body.onclick = null

javascript 复制代码 
document.body.addEventListener("click", function () {
  console.log('document.body clicked 事件捕获阶段')
}, true)

document.body.addEventListener("click", function () {
  console.log('document.body clicked 事件冒泡阶段')
})

document.body.onclick = function(){
  console.log('document.body clicked 事件冒泡阶段-onclick')
}

// 事件冒泡阶段-1
document.body.addEventListener("click", function () {
  console.log('document.body clicked 事件冒泡阶段-1')
})

在上面的代码的基础上，又添加了一个事件监听事件冒泡阶段-1。 打印结果如下：

javascript 复制代码 
document.body clicked 事件捕获阶段
document.body clicked 事件冒泡阶段
document.body clicked 事件冒泡阶段-onclick
document.body clicked 事件冒泡阶段-1

在同一阶段同一事件类型添加多个事件监听，在触发点击事件时，多个事件监听器执行的顺序就是添加的顺序。

Event

在 DOM 中发生事件时，所有相关信息都会被收集并存储在一个名为 event的对象中，event也是传给事件监听器的唯一参数。在通过dispatchEvent方法触发事件监听时，就用到Event类生成一个event对象。不同的事件生成的事件对象会包含不同的属性和方法，但他们无疑都继承了Event。 所有的事件对象都包含一些公共属性和方法，例如：

  • type: 事件类型
  • currentTarget: 注册该事件监听器的元素
  • target: 事件目标
  • preventDefault: 阻止默认行为
  • stopPropagation: 阻止事件流继续传播
  • eventPhase: 调用当前事件监听所处的阶段：1代表捕获阶段，2代表到达目标，3代表冒泡阶段。
javascript 复制代码 
document.body.addEventListener("click", function (event) {
  const { constructor: {name} } = event
  console.log(name)  // PointerEvent
  console.log(event instanceof Event) // true
})

点击后的打印结果分别为PointerEvent、true，说明click中的事件对象是PointerEvent的实例，而PointerEvent又继承了Event。

javascript 复制代码 
document.addEventListener("click", function ({currentTarget, target}) {
  console.log(this === currentTarget)  // true
  console.log(document === currentTarget)  // true
  console.log(document === target)  // false
})

document.body.addEventListener("click", function ({currentTarget, target}) {
  console.log(this === currentTarget)  // true
  console.log(document.body === currentTarget)  // true
  console.log(document.body === target)  // true
})

点击body时，使用普通函数注册的事件监听，在执行期间this等于currentTarget，指向注册当前事件监听的元素。而target永远指向事件目标document.body。

javascript 复制代码 
// 捕获
document.addEventListener("click", function (event) {
 event.stopPropagation()
 console.log('document.body clicked 事件捕获阶段')
}, true)

// 冒泡
document.body.addEventListener("click", function (event) {
  console.log('document.body clicked 事件冒泡阶段')
})

点击body时，不会打印document.body clicked 事件冒泡阶段，因为在捕获阶段就已经阻止了事件流继续传播，因此不会到达冒泡阶段。

需要注意的是，event对象只在事件监听器执行期间存在，一旦执行完毕，就会被销毁。

相关推荐
一点七加一2 小时前
Harmony鸿蒙开发0基础入门到精通Day07--JavaScript篇
开发语言·javascript·ecmascript
Anlici7 小时前
连载小说大学生课设 需求&架构
前端·javascript·后端
i源8 小时前
Java语言处理Js文件内容格式化
java·javascript
“负拾捌”8 小时前
基于NodeJs实现一个MCP客户端（会话模式和无会话模式）
javascript·ai·node.js·大模型·mcp
蒜香拿铁9 小时前
Angular【基础语法】
前端·javascript·angular.js
元直数字电路验证9 小时前
ASP.NET Core Web APP(MVC)开发中无法全局配置 NuGet 包，该怎么解?
前端·javascript·ui·docker·asp.net·.net
我有一棵树10 小时前
Vue 项目中全局样式的正确写法：不要把字体和主题写在 #app 上
前端·javascript·vue.js
龙仔CLL11 小时前
微前端乾坤vue3项目使用tinymce，通过npm，yarn，pnpm包安装成功，但是引用报错无法使用
javascript·arcgis·npm
Mountain0812 小时前
解决 Node.js 启动报错：digital envelope routines 错误全记录
javascript·npm·node.js
wangbing112513 小时前
开发指南139-VUE里的高级糖块
前端·javascript·vue.js
热门推荐
01GitHub 镜像站点02BongoCat - 跨平台键盘猫动画工具03UV安装并设置国内源04Linux下V2Ray安装配置指南05jdk21下载、安装（Windows、Linux、macOS）06NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南07安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）08GitLab 零基础入门指南：从安装到项目管理全流程09KGG转MP3工具|非KGM文件|解密音频10在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）