详解JavaScript中的事件流和事件处理程序

JavaScript中的事件是指用户与网页进行交互时所产生的所有动作，比如鼠标点击、键盘敲击、窗口滚动等等。JavaScript需要对这些事件进行处理，而事件的类型和顺序则由事件流来控制。本篇文章将详细介绍JavaScript中的事件流和事件处理程序，并提供示例说明。

事件流

事件流描述的是从页面中接收事件的顺序。

事件冒泡

事件冒泡指的是事件从最深层的元素开始，逐步向上传递到父元素，直到传递到最外层的元素。比如，当一个用户单击了一个按钮时，这个单击事件会从按钮开始传递到父元素，直至传递到文档的根节点。

针对事件冒泡，我们可以通过addEventListener方法来为HTML元素添加事件监听器，当事件到达子元素后，默认情况下会沿着父元素一直冒泡到文档根节点。

// 给button元素添加单击事件监听器
const button = document.getElementById('button');
button.addEventListener('click', () => {
  console.log('Button clicked');
});

事件捕获

事件捕获是指事件从最外层的元素开始，逐渐向下传递到最深层的元素的过程。比如，当一个用户单击了一个按钮时，这个单击事件会从文档根节点开始，传递到按钮元素。

针对事件捕获，同样可以通过addEventListener方法来为HTML元素添加事件监听器，当事件捕获到父元素后，会沿着事件的传递路径依次进行捕获。

// 向文档根节点添加事件监听器，事件捕获
document.addEventListener('click', () => {
  console.log('Document clicked');
}, true);

DOM事件流

DOM事件流包括三个阶段：事件捕获阶段、目标元素阶段和事件冒泡阶段。

// 给button元素同时添加事件监听器，捕获和冒泡两个阶段
const button = document.getElementById('button');
button.addEventListener('click', () => {
  console.log('Button clicked - Target phase');
}, false);
button.addEventListener('click', () => {
  console.log('Button clicked - Bubbling phase');
}, true);

事件处理程序

事件处理程序指的是处理事件的函数，可以通过三种方式来定义和使用。

HTML事件处理程序

HTML事件处理程序指的是直接在HTML元素中通过on属性来定义事件处理程序。

<!-- 在button元素中直接定义单击事件处理程序 -->
<button onclick="alert('Button clicked')">Click me</button>

虽然使用HTML事件处理程序很方便，但是会给 HTML 元素添加固有的事件处理程序，使代码变得混乱不易维护，不推荐使用。

DOM0级事件处理程序

DOM0级事件处理程序指的是在JavaScript代码中直接为HTML元素绑定事件处理程序。

// 直接为button元素添加单击事件处理程序
const button = document.getElementById('button');
button.onclick = function() {
  console.log('Button clicked');
};

DOM0级事件处理程序看似出现过时，但实际上在某些情况下它是很有用处的。但需要注意的是，采用这种方式绑定的事件处理程序是无法移除的，可以改为使用addEventListener方法添加事件监听器。

DOM2级事件处理程序

DOM2级事件处理程序指的是通过addEventListener方法为HTML元素添加事件监听器。

// 给button元素添加单击事件监听器
const button = document.getElementById('button');
button.addEventListener('click', () => {
  console.log('Button clicked');
});

和DOM0级事件处理程序相比，DOM2级事件处理程序具有更好的兼容性和灵活性，事件处理程序也可以很容易地被移除。

示例1：事件冒泡和事件捕获

<div id="outer">
  <div id="inner">Click me</div>
</div>

const outer = document.getElementById('outer');
const inner = document.getElementById('inner');
outer.addEventListener('click', () => {
  console.log('Outer clicked - Bubbling phase');
}, true);
outer.addEventListener('click', () => {
  console.log('Outer clicked - Target phase');
}, false);
inner.addEventListener('click', () => {
  console.log('Inner clicked - Bubbling phase');
}, true);
inner.addEventListener('click', () => {
  console.log('Inner clicked - Target phase');
}, false);

输出结果：

Inner clicked - Target phase
Inner clicked - Bubbling phase
Outer clicked - Bubbling phase

示例2：取消冒泡

<div id="outer">
  <div id="inner">Click me</div>
</div>

const outer = document.getElementById('outer');
const inner = document.getElementById('inner');
outer.addEventListener('click', () => {
  console.log('Outer clicked');
}, false);
inner.addEventListener('click', (event) => {
  console.log('Inner clicked');
  event.stopPropagation(); // 禁止事件继续冒泡
}, false);

当点击内层元素时，输出结果为Inner clicked，并且事件不会冒泡到外层元素。