事件处理：addEventListener() 的用法与事件流
-
事件处理：addEventListener() 的用法与事件流
引言
大家好，欢迎来到今天的讲座！今天我们要聊一聊 JavaScript 中非常重要的一个话题——事件处理。特别是 addEventListener() 这个方法，以及它背后的 事件流 概念。如果你曾经写过前端代码，那你一定遇到过点击按钮、输入框变化、页面加载等事件。那么，这些事件到底是怎么被触发的？我们又是如何监听并处理它们的呢？
别担心，今天我们会用轻松诙谐的语言，结合一些代码示例，带你一步步了解 addEventListener() 的用法，以及它在事件流中的角色。准备好了吗？让我们开始吧！
1. 什么是事件？
在网页中，事件 是用户或浏览器发起的动作。比如：
用户点击了一个按钮
用户在输入框中输入了文字
页面加载完成
网页滚动到了某个位置
这些动作都会触发相应的事件。JavaScript 提供了多种方式来监听和处理这些事件。最常用的方式之一就是使用 addEventListener() 方法。
1.1 传统的事件绑定方式
在 addEventListener() 出现之前，我们通常使用以下几种方式来绑定事件：
// 直接在 HTML 中绑定
// 使用 DOM0 级事件处理程序
document.getElementById('myButton').onclick = function() {
alert('Hello!');
};
// 使用 DOM2 级事件处理程序（不推荐）
document.getElementById('myButton').addEventListener('click', function() {
alert('Hello!');
});
虽然这些方法也能工作，但它们有一些局限性。比如，直接在 HTML 中绑定事件会让代码变得难以维护，而 onclick 只能绑定一个事件处理函数。如果想绑定多个事件处理函数，该怎么办呢？
这时候，addEventListener() 就派上用场了！
2. addEventListener() 的基本用法
addEventListener() 是一种更灵活、更强大的事件绑定方式。它的语法非常简单：
target.addEventListener(event, callback, options);
target：你要绑定事件的目标元素，可以是任何 DOM 元素。
event：你想要监听的事件类型，比如 'click'、'mouseover'、'keydown' 等。
callback：当事件触发时执行的回调函数。
options：可选参数，用于控制事件的行为（后面会详细介绍）。
2.1 简单的例子
假设我们有一个按钮，点击后会弹出一个提示框。我们可以这样写：
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('You clicked the button!');
});
是不是很简单？而且，addEventListener() 允许我们为同一个事件绑定多个处理函数。比如，我们可以给同一个按钮绑定两个点击事件：
button.addEventListener('click', function() {
console.log('First handler');
});
button.addEventListener('click', function() {
console.log('Second handler');
});
当你点击按钮时，两个处理函数都会依次执行，输出：
First handler
Second handler
2.2 事件对象
在事件处理函数中，你可以访问一个名为 event 的对象，它包含了关于当前事件的详细信息。比如，event.target 表示触发事件的元素，event.type 表示事件的类型。
button.addEventListener('click', function(event) {
console.log('Event type:', event.type); // 'click'
console.log('Target element:', event.target); //
});
2.3 移除事件监听器
有时候，我们可能需要移除已经绑定的事件监听器。这时可以使用 removeEventListener()，它的用法与 addEventListener() 类似：
function handleClick() {
console.log('Button clicked!');
}
button.addEventListener('click', handleClick);
// 一段时间后移除事件监听器
setTimeout(function() {
button.removeEventListener('click', handleClick);
}, 5000);
注意：要成功移除事件监听器，必须传入与添加时相同的回调函数引用。如果你使用匿名函数，就无法移除了。因此，最好使用命名函数。
3. 事件流：捕获与冒泡
现在我们已经知道了如何使用 addEventListener() 来绑定事件，但你知道吗？事件其实是有“流动”的过程的。这个过程被称为 事件流，分为两个阶段：
捕获阶段（Capturing Phase）
冒泡阶段（Bubbling Phase）
3.1 事件流的工作原理
假设我们有如下的 HTML 结构：
当我们点击按钮时，事件并不是只发生在按钮上。实际上，事件会从文档的根节点（document）开始，逐层向下传递到目标元素（
捕获阶段：事件从 document 开始，依次经过 、
、、，最后到达