前端基础：DOM事件级别与事件流详解

DOM事件概述与级别划分

在Web应用开发中，处理用户交互是核心环节之一，涉及鼠标点击、键盘按键等多种行为。这些交互构成了前端DOM事件的基础，每种事件都有特定的触发条件与响应效果。本文将系统梳理DOM事件相关的属性与方法，帮助开发者深入理解其工作原理。

在探讨具体事件处理前，需先明确DOM规范的各个版本。不同版本的DOM标准对应着不同的事件处理机制，理解这一层级关系是掌握事件模型的前提。

DOM规范与事件模型对应关系

DOM规范主要划分为四个级别：DOM0、DOM1、DOM2和DOM3。相应地，事件处理模型也分为三个级别：DOM0级事件处理、DOM2级事件处理和DOM3级事件处理。具体对应关系如图所示：

值得注意的是，并不存在“DOM1级事件处理”。这是因为在DOM1级标准中并未定义任何事件相关内容，因此该级别下没有专门的事件模型。

此处不再赘述DOM各级别的详细规范，重点在于对比不同DOM版本中事件处理机制的具体实现与差异。

DOM0级事件处理机制

1. DOM0级事件处理

在深入DOM0级事件之前，有必要先了解HTML内联事件处理程序，这是最早出现的事件处理方式。其代码结构如下：

<button type="button" onclick="showFn()"></button>
<script>
 function showFn() {
 alert('Hello World');
 }
</script>

上述代码通过在HTML标签中直接定义onclick属性来触发showFn函数。这种方式的显著缺点是HTML结构与JavaScript代码紧密耦合，若需修改函数名，必须同时修改HTML和JS两处代码。其优势在于无需通过DOM操作即可绑定事件。

那么，何为DOM0级事件处理？其核心是将一个函数对象赋值给元素的事件处理属性，例如：

<button id="btn" type="button"></button>
<script>
 var btn = document.getElementById('btn');
 btn.onclick = function() {
 alert('Hello World');
 }
 // btn.onclick = null; 解绑事件 
</script>

上述代码通过JS获取具有特定id的按钮元素，并将一个匿名函数赋值给其onclick属性。这是DOM0级事件处理的典型体现。若要解除该事件绑定，只需将事件处理属性赋值为null即可。

DOM0级事件处理的主要局限在于，一个事件处理属性只能绑定一个函数。若希望在同一按钮点击事件中执行多个函数，DOM0级方式难以直接实现。

DOM2级事件与浏览器兼容

2. DOM2级事件处理

DOM2级事件模型弥补了DOM0级无法绑定多个处理函数的缺陷，允许为同一个事件处理程序注册多个回调函数。具体实现代码如下：

<button id="btn" type="button"></button>
<script>
 var btn = document.getElementById('btn');
 function showFn() {
 alert('Hello World');
 }
 btn.addEventListener('click', showFn, false);
 // btn.removeEventListener('click', showFn, false); 解绑事件 
</script>

DOM2级规范定义了addEventListener和removeEventListener两个核心方法，分别用于事件的绑定与解绑。这两个方法接收三个参数：事件类型名称（不含on前缀）、处理函数以及一个布尔值，用于指定事件是在捕获阶段还是冒泡阶段执行。若需额外添加鼠标移入事件的监听，只需：

btn.addEventListener('mouseover', showFn, false);

执行上述代码后，无论是点击按钮还是鼠标移入，均会触发showFn函数。

需注意，IE8及以下版本不支持addEventListener和removeEventListener，需使用attachEvent和detachEvent方法进行兼容处理：

btn.attachEvent('onclick', showFn); // 绑定事件 
btn.detachEvent('onclick', showFn); // 解绑事件

在此兼容方案中，无需传入第三个参数，因为IE8以下版本仅支持冒泡型事件，不支持捕获阶段。

DOM3级事件类型扩展

3. DOM3级事件处理

DOM3级事件模型在DOM2级的基础上扩展了更多事件类型，完整的事件类型列表如下：

1. UI事件：用户与页面元素交互时触发，例如load、scroll等。
2. 焦点事件：元素获得或失去焦点时触发，例如blur、focus等。
3. 鼠标事件：用户通过鼠标操作页面时触发，例如dbclick、mouseup等。
4. 滚轮事件：使用鼠标滚轮或类似设备时触发，例如mousewheel。
5. 文本事件：在文档中输入文本时触发，例如textInput。
6. 键盘事件：用户通过键盘操作页面时触发，例如keydown、keypress。
7. 合成事件：为IME（输入法编辑器）输入字符时触发，例如compositionstart。
8. 变动事件：底层DOM结构发生变化时触发，例如DOMsubtreeModified。

此外，DOM3级事件模型还允许开发者自定义特定事件类型。

事件流：冒泡与捕获详解

DOM事件流机制

前文提及addEventListener的第三个参数用于指定事件执行阶段：设为true表示在捕获阶段执行，设为false表示在冒泡阶段执行。那么，什么是事件捕获与事件冒泡？可通过下图直观理解：

1. 事件冒泡机制

事件冒泡是指事件从触发源开始，由内向外逐层向上传递的过程。如上图所示，若a标签为事件目标，点击a标签后，点击事件会依次触发p、li等父元素上的点击事件，直至到达最外层的html或document对象。代码示例如下：

<div id="box">
 <a id="child">事件冒泡</a>
</div>
<script>
 var box = document.getElementById('box'),
 child = document.getElementById('child');
 child.addEventListener('click', function() {
 alert('我是目标事件');
 }, false);
 box.addEventListener('click', function() {
 alert('事件冒泡至DIV');
 }, false);
</script>

运行上述代码并点击a标签，控制台首先弹出“我是目标事件”，随后弹出“事件冒泡至DIV”。这证实了事件自内而外向上冒泡的执行顺序。

若需阻止事件继续向上传播，可使用Event对象提供的stopPropagation方法，具体实现如下：

child.addEventListener('click', function(e) {
 alert('我是目标事件');
 e.stopPropagation();
}, false);

添加stopPropagation方法后，再次点击a标签，将不再触发div上的click事件，从而阻止了冒泡过程。

2. 事件捕获机制

与事件冒泡相反，事件捕获是从外向内执行。只需将addEventListener的第三个参数修改为true即可实现。

<div id="box">
 <a id="child">事件冒泡</a>
</div>
<script>
 var box = document.getElementById('box'),
 child = document.getElementById('child');
 child.addEventListener('click', function() {
 alert('我是目标事件');
 }, true);
 box.addEventListener('click', function() {
 alert('事件冒泡至DIV');
 }, true);
</script>

执行上述代码并点击a标签，首先弹出“事件冒泡至DIV”，随后弹出“我是目标事件”，其执行顺序与事件冒泡完全相反。

总结

本文系统介绍了不同DOM级别下的事件处理程序，并深入解析了事件冒泡与捕获的触发原理及控制方法。熟练掌握各版本DOM事件的特性，并能有效解决浏览器兼容性问题，对提升前端项目开发质量至关重要。在后续文章中，将进一步介绍DOM事件中Event对象的详细属性与方法。

以上就是本文的全部内容，希望能为读者提供帮助。有兴趣的读者可参考《DOM 事件的深入浅出（二）》，同时也感谢对本站的支持！