事件流与事件处理-优快云博客

本文详细介绍了DOM事件流的概念，包括事件冒泡和事件捕获的过程，并解释了DOM2规范中事件流的三个阶段。此外，还探讨了不同类型的事件处理程序及其应用场景，如DOM0级和DOM2级事件处理程序的区别。文章还覆盖了事件对象的属性及方法，事件类型的分类，并提供了HTML5新增事件的介绍。最后，给出了事件处理性能优化的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一. 事件流

1. 事件冒泡

从目标节点触发，一直向 Document 截止，经过的每一个节点都会触发相同的事件。

2. 事件捕获

从Document 开始，一直到目标节点，经过的每一个节点都触发相同的事件

3. DOM事件流

DOM2 规范中规定事件流分为三个阶段：事件捕获，到达目标，事件冒泡

二. 事件处理程序

1. DOM0事件处理程序

事件函数中的this指向该节点本身，以该种方式注册的事件是在冒泡阶段触发，可以将其值设置为null来解除事件的绑定

let btn = document.getElementById('btn')
btn.onclick = function(){
	console.log(this)
}

2. DOM2 事件处理程序

该种方式的优势是可以给同一事件添加多个事件处理函数

addEventListener: 接收三个参数，第一个参数为要监听的事件，第二个参数为事件处理函数，第三个值为一个布尔值，false（默认值）表示在事件的冒泡阶段触发，true表示在捕获阶段。
removeEventListener: 用来取消事件的绑定

三. 事件对象

在DOM中发生事件时，所有相关的信息都会被收集并存储在一个名为event 的对象中

bubbles: 表示事件是否冒泡
cancelable：表示是否可以取消事件默认行为
currentTarget: 当前事件处理程序所在的元素，始终等于this
defaultPrevented: true 表示已经调用preventDefault 方法（dom3 中新增）
preventDefault(): 用于取消事件的默认行为
stopPropagation(): 用于取消后续事件捕获或冒泡
target: 事件目标
detail : DOM2 规范中定义，给出关于事件的更多信息

四. 事件类型

DOM3 事件中定义了如下事件类型

1. 用户界面事件

load：在window上当页面加载完成后触发
unload: 在页面卸载后触发
select：在文本框中用户选择一个或多个字符时触发
resize：在 window 中窗口大小被改变时触发，最大最小化时也会触发
scroll：用户滚动滚条时触发

2. 焦点事件

blur：元素失去焦点时触发
focus：当元帅获取焦点时触发（不冒泡）
focusin: focus 的冒泡版
focusout: 是blur的通用版

3. 鼠标事件

click: 单机鼠标左键或按下回车触发
dblclick: 双击触发
mousedown: 在用户按下任意鼠标键时触发
mouseup: 用户释放鼠标时触发
mouseover: 光标从外部移动到内部触发
mouseout: 从内部移出到外部触发
mousemove: 在元素上触发时反复触发
注意：以上事件都为冒泡事件
触发顺序：

mousedowm -> mouseup -> click -> mousedowm -> mouseup -> dbclick

4. 滚轮事件

mousewheel: 监听滚轮滚动
在其事件对象中有一个wheelDelta属性，每次向前滚动时+120，向后滚动-120

5. 输入事件

textInput: 文本被插入到文本框时触发，DOM3规范后，只在可编辑区域触发
事件对象

data：表示文本中输入的值
inputMethod: 该属性表示向控件中输入文本的手段

6. 键盘事件

keydown: 用户按下键盘上的某个值
keypress: 按下某个键产生字符时触发，持续按住重复触发
keyup: 用户释放某个键时触发
该事件对象上有一个 keyCode 属性，对应键盘上的按键
DOM3 为键盘事件实现了规范，定义了key和char属性来代替keyCode

五. HTML5事件

contextmenu事件
beforeunload 事件：在window上触发，提供组织页面被卸载的机会
DOMContentLoaded事件： DOM树构建完成后立即触发，不等待外部资源加载，load 则会等待所有外部资源加载完成后触发，因此始终在load事件之前触发
readystatechange 事件：
hashchange: URL散列值发生变化时通知开发者
pageshow 和 pagehide：往返缓存，在使用浏览器前进和后退时加快页面之间的切换。在页面显示或隐藏时触发。

六. 性能优化

过多的事件处理会造成页面交互延迟，因此需要使用合适的方法解决优化性能

1. 事件委托

利用事件冒泡，使用一个事件处理程序来管理一个事件类型。
通过不同元素的id来为其设置事件处理函数。

    const handleEvent = {
        'nav'(){
            console.log('我是nav标签')
        },
        'header'(){
            console.log('我是header标签')
        }
    }

    document.addEventListener('click', (event)=>{
        let target = event.target;
        handleEvent[target.id]();
    }, false)