【JavaScript】事件对象Event及其常见属性详解

在 JavaScript 中，event 对象是一个非常重要的概念，它用于描述在页面交互过程中发生的事件。通过了解和掌握 event 对象及其常见属性，开发者可以更好地处理用户操作并为用户提供友好的交互体验。本文将详细介绍 event 对象及其常见属性，帮助你在实际项目中灵活运用这些知识。

一、事件对象（Event）概述

1. 事件对象的定义

event 对象是浏览器自动生成的对象，当用户与页面进行交互时（如点击、键盘输入、鼠标移动等），事件触发时就会自动传递给事件处理函数。event 对象包含了与事件相关的各种信息，开发者可以通过访问 event 对象的属性来获取具体的事件细节，并执行相应的操作。

2. 事件的类型

在 JavaScript 中，事件类型非常丰富，常见的包括：

• 鼠标事件：click（点击）、dblclick（双击）、mousedown（按下鼠标）、mouseup（释放鼠标）、mousemove（移动鼠标）、mouseenter（鼠标进入元素）、mouseleave（鼠标离开元素）等。
• 键盘事件：keydown（按下键盘）、keypress（按下字符键）、keyup（释放键盘）。
• 表单事件：submit（提交表单）、focus（聚焦）、blur（失焦）。
• 触摸事件：touchstart（触摸开始）、touchmove（触摸移动）、touchend（触摸结束）。
• 窗口事件：resize（窗口大小变化）、scroll（滚动）。

通过绑定不同类型的事件，开发者可以实现丰富的交互效果。

二、Event 对象的常见属性

1. type 属性

type 属性返回触发事件的类型，以字符串形式表示。例如，鼠标点击触发的事件类型为 "click"，键盘按下触发的事件类型为 "keydown"。这是判断事件类型的重要依据。

document.addEventListener('click', (event) => {
  console.log(event.type); // 输出 'click'
});

2. target 属性

target 属性指向触发事件的元素（事件源）。通过访问 event.target，我们可以知道具体哪个 DOM 元素引发了该事件。常用于表单或列表中，以确定用户与哪个元素进行了交互。

document.addEventListener('click', (event) => {
  console.log(event.target); // 输出被点击的元素
});

3. currentTarget 属性

currentTarget 与 target 不同，它表示当前事件监听器所绑定的元素。即使事件是从子元素触发的，currentTarget 始终指向绑定事件处理函数的元素。

document.querySelector('button').addEventListener('click', (event) => {
  console.log(event.currentTarget); // 输出绑定事件的按钮元素
});

4. preventDefault() 方法

preventDefault() 方法用于阻止事件的默认行为。例如，点击链接时，浏览器会跳转到链接地址，使用 preventDefault() 可以阻止这一行为。

document.querySelector('a').addEventListener('click', (event) => {
  event.preventDefault(); // 阻止链接的默认跳转行为
  console.log('默认行为已阻止');
});

5. stopPropagation() 方法

stopPropagation() 方法用于阻止事件的冒泡传播。事件冒泡是指事件从子元素向父元素传递的过程，有时我们希望阻止这一传递，可以使用此方法。

document.querySelector('.child').addEventListener('click', (event) => {
  event.stopPropagation(); // 阻止事件冒泡
  console.log('事件冒泡已阻止');
});

6. clientX 和 clientY 属性

这两个属性用于获取鼠标事件相对于浏览器窗口可视区域左上角的坐标。clientX 返回鼠标点击时的横坐标，clientY 返回鼠标点击时的纵坐标。

document.addEventListener('click', (event) => {
  console.log(`鼠标点击位置：(${event.clientX}, ${event.clientY})`);
});

7. key 和 keyCode 属性

在键盘事件中，key 属性返回按下的具体字符，而 keyCode 属性返回按下键的数字代码（已逐渐废弃，推荐使用 key）。

document.addEventListener('keydown', (event) => {
  console.log(`按下的键：${event.key}`); // 输出按下的键
});

8. altKey、ctrlKey、shiftKey 和 metaKey 属性

这些属性用于判断事件触发时是否按下了特定的修饰键（如 Alt、Ctrl、Shift 或 Meta）。返回值为布尔类型，true 表示修饰键被按下。

document.addEventListener('keydown', (event) => {
  if (event.ctrlKey && event.key === 's') {
    event.preventDefault(); // 阻止默认保存行为
    console.log('Ctrl + S 组合键被按下');
  }
});

9. button 属性

button 属性用于鼠标事件中，表示按下了哪个鼠标按钮。常见的取值包括：

• 0：左键
• 1：中键（滚轮）
• 2：右键

document.addEventListener('mousedown', (event) => {
  console.log(`按下的按钮：${event.button}`); // 输出 0、1 或 2
});

三、事件对象的常见方法

1. preventDefault()

如前文所述，preventDefault() 可阻止事件的默认行为，例如表单提交、链接跳转等。

2. stopPropagation()

stopPropagation() 用于阻止事件冒泡，使事件不会传递到父元素。

3. stopImmediatePropagation()

stopImmediatePropagation() 除了阻止事件冒泡外，还会阻止当前元素上其他同类型事件处理程序的执行。

document.querySelector('.btn').addEventListener('click', (event) => {
  event.stopImmediatePropagation();
  console.log('第一个处理程序');
});

document.querySelector('.btn').addEventListener('click', () => {
  console.log('第二个处理程序');
});

在此例中，stopImmediatePropagation() 会阻止第二个 click 事件处理程序的执行。

四、事件对象的实际应用

1. 表单验证中的应用

事件对象常用于表单验证。通过监听 submit 事件并使用 preventDefault() 阻止默认提交行为，开发者可以在提交前进行自定义验证。

form.addEventListener('submit', (event) => {
  if (!isValidForm()) {
    event.preventDefault(); // 阻止表单提交
    alert('表单无效');
  }
});

2. 键盘快捷键

通过监听 keydown 事件并结合 ctrlKey、shiftKey 等属性，开发者可以轻松实现键盘快捷键功能。

document.addEventListener('keydown', (event) => {
  if (event.ctrlKey && event.key === 's') {
    event.preventDefault();
    console.log('保存快捷键被触发');
  }
});

五、总结

event 对象是 JavaScript 事件处理中的核心，它为开发者提供了丰富的属性和方法来获取事件信息并对用户交互进行处理。了解并掌握 event 对象及其常见属性，可以帮助开发者更好地处理页面交互事件，并提高用户体验。希望本文能帮助你在项目中更加灵活地运用事件对象，提升项目的交互性和可维护性。

推荐：

• JavaScript
• react
• vue

---