JavaScript 事件
在 JavaScript 中，我们可以通过事件监听器来响应用户的交互操作，如点击、鼠标移动、键盘输入等。这些事件可以使我们的网页更加动态和用户友好。本文将整理一些常见的交互事件及其使用方法，并给出一些示例演示。
-
事件监听器
-
事件监听器是一种用于监听特定事件的函数，当该事件发生时，监听器函数将被调用。可以通过
addEventListener方法来为特定的元素添加事件监听器。
element.addEventListener(eventType, listenerFunction, useCapture);
eventType是要监听的事件类型，如click、mousemove等。listenerFunction是事件发生时要执行的函数。useCapture是一个可选的布尔值，指定事件是在冒泡阶段(false)还是捕获阶段(true)触发。默认为false。
以下是几个常见的交互事件及其使用方法：
点击事件
-
点击事件（click）在用户点击元素时触发。
const button = document.getElementById("myButton");
button.addEventListener("click", function(event) {
// 事件处理代码
console.log("按钮被点击了");
});
鼠标移动事件
鼠标移动事件（mousemove）在鼠标在元素内移动时触发。
const element = document.getElementById("myElement");
element.addEventListener("mousemove", function(event) {
// 事件处理代码
console.log("鼠标移动了");
});
键盘事件
-
键盘事件可以响应用户的键盘输入。常见的键盘事件有 keydown、keyup 和 keypress。
const input = document.getElementById("myInput");
input.addEventListener("keydown", function(event) {
// 事件处理代码
console.log("键盘按下了");
});
事件传播机制
-
JavaScript中的事件传播机制指的是事件从发生的元素开始向父元素或子元素的传递过程。 -
父元素或子元素的传递过程有三个阶段：
捕获阶段、目标阶段和冒泡阶段。 -
捕获阶段：事件从最外层的父元素开始传递到目标元素。 -
目标阶段：事件到达目标元素。 -
冒泡阶段：事件从目标元素开始向最外层的父元素传递。
可以通过 capture 参数来指定事件是否在捕获阶段触发，默认为 false，即在冒泡阶段触发。
-
为了演示事件传播机制，我们创建一个 HTML 结构：
<div id="outer">
<div id="inner">
<button id="button">点击我</button>
</div>
</div>
-
然后添加事件监听器：
const outer = document.getElementById("outer");
const inner = document.getElementById("inner");
const button = document.getElementById("button");
outer.addEventListener("click", function(event) {
console.log("点击了外层元素");
}, true);
inner.addEventListener("click", function(event) {
console.log("点击了内层元素");
}, true);
button.addEventListener("click", function(event) {
console.log("按钮被点击了");
});
当我们点击按钮时，控制台将按照如下顺序输出：
点击了外层元素
点击了内层元素
按钮被点击了
