简单来说，事件就是用户或浏览器执行的某些动作，比如说点击按钮、移动鼠标、按下键盘等等。
通过捕获事件之后处理事件，可以让网页对这些动作做出响应，进而实现更丰富的交互效果。
事件的类型
JavaScript 中事件的类型非常多，比较常用且典型的有以下几种：
鼠标事件类：如 click（点击）、dblclick（双击）、mouseover（鼠标移入）、mouseout（鼠标移出）等。
键盘事件类：如 keydown（按下键）、keyup（释放键）等。
表单事件类：如 submit（提交表单）、change（表单元素值改变）等。
窗口事件类：如 load（页面加载完成）、resize（窗口大小改变）等。
事件监听
不用担心事件太多，因为所有事件的处理都可以通过 addEventListener 方法来添加事件监听器。
这个方法有三个参数：事件类型、事件处理函数和一个布尔值（表示是否在捕获阶段处理事件）。
// 添加事件监听器 document.getElementById('myButton').addEventListener( 'click', function (event) { alert('按钮被点击了！'); }, false );
在上面的代码中，我们给一个按钮添加了 click 事件的监听器。
当按钮被点击时，会弹出一个提示框。
第三个参数 false 表示在事件冒泡阶段处理事件。
事件冒泡
事件冒泡指的是当一个事件发生在某个元素上时，这个事件会从最内层的目标元素开始，一层一层向上传递，直到最外层的元素。
这个过程就像水泡从水底冒到水面一样，因此被称为“事件冒泡”。
假设有一个嵌套的 HTML 结构，如下所示：
<div id="outer"> <div id="inner"> <button id="myButton">点击我</button> </div> </div>
当我们点击按钮时，click 事件会首先在按钮元素上触发，然后依次向上传递到 inner 和 outer 元素，最后到达 document 对象。这就是事件冒泡的过程。
事件冒泡的示例
可以通过添加事件监听器来观察事件冒泡的过程：
<script> document.getElementById('outer').addEventListener('click', function () { console.log('外层 div 被点击'); }); document.getElementById('inner').addEventListener('click', function () { console.log('内层 div 被点击'); }); document.getElementById('myButton').addEventListener('click', function () { console.log('按钮被点击'); }); </script>
在这个示例中，当我们点击按钮时，控制台会依次输出：
按钮被点击 内层 div 被点击 外层 div 被点击
这说明事件从按钮开始，依次向上传递到内层 div 和外层 div，也就是事件冒泡的过程。
阻止事件冒泡
当不希望事件冒泡到上层元素时，可以使用事件对象的 stopPropagation 方法来阻止事件冒泡：
document.getElementById('myButton').addEventListener('click', function (event) { event.stopPropagation(); console.log('按钮被点击'); });
在按钮的点击事件处理函数中调用了 event.stopPropagation 方法，这样点击按钮时，事件就不会冒泡到内层和外层的 div 元素了。
事件捕获
除了事件冒泡，还有一个相反的过程叫做事件捕获。
事件捕获是指事件从最外层的元素开始，一层一层向内传递，直到目标元素。
我们可以通过在 addEventListener 方法的第三个参数中传递 true 来启用事件捕获：
document.getElementById('outer').addEventListener( 'click', function () { console.log('外层 div 被点击'); }, true ); document.getElementById('inner').addEventListener( 'click', function () { console.log('内层 div 被点击'); }, true ); document.getElementById('myButton').addEventListener( 'click', function () { console.log('按钮被点击'); }, true );
在这个示例中，当我们点击按钮时，控制台会依次输出：
外层 div 被点击 内层 div 被点击 按钮被点击
移除事件监听
可以使用 removeEventListener 方法来实现移除事件监听，该方法的参数与 addEventListener 方法相同。
// 定义事件处理函数 function handleClick(event) { alert('按钮被点击了！'); } // 添加事件监听器 document .getElementById('myButton') .addEventListener('click', handleClick, false); // 移除事件监听器 document .getElementById('myButton') .removeEventListener('click', handleClick, false);
事件处理
如前面展开的描述，事件处理主要分为两个阶段：事件捕获和事件冒泡。
事件对象
当事件发生时，浏览器会创建一个事件对象，并将其传递给事件处理函数。
通过这个事件对象，我们可以获取事件的详细信息，比如事件类型、目标元素、鼠标位置等。
document.getElementById('myButton').addEventListener('click', function (event) { console.log('事件类型：' + event.type); console.log('目标元素：' + event.target); console.log('鼠标位置：' + event.clientX + ', ' + event.clientY); });
通过事件对象 event 可以获取事件的类型、目标元素和鼠标位置等信息。
事件处理的示例
来看一个完整的如何处理不同类型的事件的示例：
这个页面有一个按钮，一个输入框。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>事件处理示例</title> </head> <body> <button id="myButton">点击我</button> <input type="text" id="myInput" placeholder="输入文字" /> <script> // 处理点击事件 document .getElementById('myButton') .addEventListener('click', function () { alert('按钮被点击了！'); }); // 处理键盘事件 document .getElementById('myInput') .addEventListener('keydown', function (event) { console.log('按下了键：' + event.key); }); // 处理表单事件 document .getElementById('myInput') .addEventListener('change', function () { console.log('输入框的值改变了：' + this.value); }); </script> </body> </html>
分别处理了按钮的点击事件、输入框的键盘事件和输入框的值改变事件。
现在你也可以开始自己试试事件处理了！
总结
🍑 事件就是用户或浏览器执行的某些动作，比如说点击按钮、移动鼠标、按下键盘等等。
🍑 所有事件的处理都可以通过 addEventListener 方法来添加事件监听器。
🍑 事件处理主要分为两个阶段：事件捕获和事件冒泡。
该文章在 2024/10/23 9:41:28 编辑过
400 186 1886
