事件【JavaScript】

1. 事件

事件是用户或浏览器动作的表示，JavaScript 中的一切交互都是通过事件来处理的。

2. 事件冒泡（Event Bubbling）

事件冒泡是指事件从最具体的元素（即触发事件的元素）开始触发，然后逐级向上传播到较为不具体的元素（即该元素的父元素、祖先元素），直到到达最顶层的元素（通常是document对象）或某个阶段的处理函数决定停止冒泡。在冒泡过程中，每个元素都有机会处理这个事件。

例如，如果你在一个按钮（button）内部点击，点击事件会首先在按钮上触发，然后冒泡到包含按钮的父元素，再到更上一级的祖先元素，以此类推。

3. 事件捕获（Event Capturing）

事件捕获与事件冒泡相反，它是指事件从最顶层的元素开始触发，然后逐级向下传播到更具体的元素，直到到达触发事件的元素。在捕获过程中，同样每个元素都有机会处理这个事件。

在事件捕获阶段，事件首先由document对象处理，然后传递给document的子元素，依次类推，直到到达实际触发事件的元素。

4. 事件流

当在DOM中触发一个事件时，这个事件并不是仅在其发生源元素上触发一次，而是会经历一个完整的事件流过程。这个过程分为三个阶段：捕获阶段、目标阶段和冒泡阶段。

捕获阶段：事件从document对象开始，按照DOM树的结构向下传播，直到到达触发事件的元素。
目标阶段：事件到达了触发事件的元素，此时会触发该元素上的事件处理函数。
冒泡阶段：事件从触发事件的元素开始，按照DOM树的结构向上冒泡，直到到达document对象或某个处理函数通过调用event.stopPropagation()方法阻止了冒泡。

在大多数情况下，事件冒泡更为常用，因为它允许开发者利用事件委托（Event Delegation）技术，即在一个父元素上设置事件监听器来处理其子元素触发的事件，从而减少需要添加的事件监听器的数量。而事件捕获在某些特定场景下也很有用，比如当需要在事件到达目标元素之前进行预处理时。

如何使用：

在JavaScript中，你可以使用addEventListener方法来为DOM元素添加事件监听器，并通过设置该方法的第三个参数来决定是在捕获阶段还是冒泡阶段处理事件。如果设置为true，则在捕获阶段处理事件；如果设置为false或省略，则在冒泡阶段处理事件。例如：

// 在冒泡阶段处理点击事件
element.addEventListener('click', function(event) {// 处理逻辑
}, false); // 或者省略第三个参数// 在捕获阶段处理点击事件
element.addEventListener('click', function(event) {// 处理逻辑
}, true);

5. 事件处理程序：

事件处理程序用于处理用户与网页元素的交互，比如点击、输入、移动鼠标等。

5.1 HTML事件处理程序

HTML事件处理程序是通过在HTML标签内使用事件属性（比如onclick、onmouseover等）来定义的。以下是一个简单的例子：

<button onclick="alert('按钮被点击了！')">点击我</button>

在这个例子中，点击按钮时，会弹出一个警告框。

优点：

使用简单直观，适合小型项目。

缺点：

不易维护，代码与结构混杂在一起，可能导致不便于管理和调试。

5.2 DOM0级事件处理程序

DOM0级事件处理程序是在JavaScript中通过直接将函数赋值给 DOM 元素的事件属性来实现的。如下所示：

<button id="myButton">点击我</button>
<script>document.getElementById('myButton').onclick = function() {alert('按钮被点击了！');};
</script>

优点：

代码与结构分离，提升了可读性和维护性。

缺点：

只支持一个事件处理程序，后面设置的会覆盖前面的。

5.3 DOM2级事件处理程序（建议使用）

DOM2级事件处理程序使用 addEventListener 方法为指定的对象添加事件监听器，支持多个事件处理函数。例子如下：

<button id="myButton">点击我</button>
<script>var button = document.getElementById('myButton');button.addEventListener('click', function() {alert('按钮被点击了！');});button.addEventListener('click', function() {console.log('另一个处理程序');});
</script>

优点：

支持多个事件处理程序，既不覆盖前面的处理程序，又能灵活处理不同的事件类型。
可以更好地管理事件的捕获与冒泡。

缺点：

不支持 IE8 及更早的浏览器。

5.4 IE事件处理程序

IE事件处理程序是特定于 Internet Explorer 的事件处理方式，通常使用 attachEvent 方法。例子如下：

<button id="myButton">点击我</button>
<script>var button = document.getElementById('myButton');button.attachEvent('onclick', function() {alert('按钮被点击了！');});
</script>

优点：

在 IE 早期版本中可用，为开发者提供了一种处理事件的方式。

缺点：

语法和DOM标准不一致，难以与其他浏览器兼容。
不支持事件捕获。
只能添加一个事件处理程序，后添加的会覆盖之前的。

6. 事件相关的示例

6.1 如何获取事件对象

在JavaScript中，事件对象提供有关事件的信息，例如事件类型、目标元素等。可以通过事件处理函数的参数来获取该对象。

示例代码：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>获取事件对象示例</title>
</head>
<body><button id="myButton">点击我</button><script>document.getElementById('myButton').addEventListener('click', function(event) {console.log(event); // 输出事件对象console.log('事件类型:', event.type); // 输出事件类型});</script>
</body>
</html>

在这个例子中，当按钮被点击时，事件对象将被传递并输出到控制台。

6.2 事件目标

事件目标是指触发事件的实际元素。可以通过事件对象的 target 属性访问事件目标。

示例代码：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>事件目标示例</title>
</head>
<body><div><button class="btn">按钮 1</button><button class="btn">按钮 2</button></div><script>const buttons = document.querySelectorAll('.btn');buttons.forEach(button => {button.addEventListener('click', function(event) {console.log('事件目标:', event.target); // 输出被点击的按钮});});</script>
</body>
</html>

在这个例子中，单击任意按钮时，控制台将输出被点击按钮的引用。

6.3 事件代理

事件代理是一种将事件处理程序绑定到父元素而不是直接绑定到目标元素上的技术。它利用事件冒泡特性来处理子元素的事件，这样可以在动态添加子元素时无需重新绑定事件。

示例代码：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>事件代理示例</title>
</head>
<body><ul id="myList"><li>项 1</li><li>项 2</li></ul><button id="addItem">添加项</button><script>// 列表的事件代理document.getElementById('myList').addEventListener('click', function(event) {if (event.target.tagName === 'LI') {alert('点击了: ' + event.target.innerText); // 输出被点击的列表项文本}});// 动态添加列表项document.getElementById('addItem').addEventListener('click', function() {const newItem = document.createElement('li');newItem.textContent = '新项';document.getElementById('myList').appendChild(newItem);});</script>
</body>
</html>

在这个例子中，无论是已经存在的列表项还是动态添加的列表项，点击时都能触发事件处理程序。

6.4 事件冒泡

事件冒泡指的是事件从事件目标向上冒泡，触发其祖先元素上的事件处理程序。可以通过设置事件的 stopPropagation() 方法来阻止事件继续冒泡。

示例代码：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>事件冒泡示例</title>
</head>
<body><div id="parent" style="border: 1px solid #001;"><button id="child">点击我</button></div><script>document.getElementById('parent').addEventListener('click', function() {console.log('父元素被点击');});document.getElementById('child').addEventListener('click', function(event) {console.log('子元素被点击');event.stopPropagation(); // 阻止事件冒泡});</script>
</body>
</html>

在这个例子中，点击子元素按钮只会输出“子元素被点击”，而不会触发父元素的点击事件。

6.5 事件流阶段 eventPhase

eventPhase属性用于指示事件当前位于事件流的哪个阶段。值为：

1：捕获阶段（事件正在捕获）
2：目标阶段（事件到达目标元素）
3：冒泡阶段（事件正向上冒泡）

示例代码：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>事件流阶段示例</title>
</head>
<body><div id="parent" style="border: 1px solid #001;"><button id="child">点击我</button></div><script>document.getElementById('parent').addEventListener('click', function(event) {console.log('父元素的 eventPhase:', event.eventPhase);}, true); // 捕获阶段document.getElementById('child').addEventListener('click', function(event) {console.log('子元素的 eventPhase:', event.eventPhase);});</script>
</body>
</html>

在这个例子中，当点击按钮时，控制台将输出事件在父元素和子元素中的流阶段信息。

6.6 取消默认事件

可以通过event.preventDefault()方法取消事件的默认行为，例如阻止链接跳转或表单提交。

示例代码：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>取消默认事件示例</title>
</head>
<body><a href="https://www.example.com" id="myLink">点击我</a><script>document.getElementById('myLink').addEventListener('click', function(event) {event.preventDefault(); // 取消链接的默认跳转行为alert('链接被点击，但不会跳转!'); });</script>
</body>
</html>

在这个例子中，当点击链接时，通过preventDefault()方法阻止了页面的跳转，同时弹出提示框。