JavaScript 中的 Event 和 KeyboardEvent

在 JavaScript 中，Event 和 KeyboardEvent 都是用来处理用户交互事件的对象。Event 是所有交互事件的基类，而 KeyboardEvent 则是键盘事件的子类。

Event

Event 对象表示一个 DOM 元素上发生的事件，例如鼠标点击、鼠标移动、键盘按下等。我们可以通过 addEventListener 或 on 来监听一个 DOM 元素上的事件。

以下是添加 click 事件监听器的示例代码：

const element = document.getElementById('my-element');

// 通过 addEventListener 添加事件监听器
element.addEventListener('click', (event) => {
  console.log('Element was clicked!');
});

// 通过 on<eventname> 添加事件监听器
element.onclick = (event) => {
  console.log('Element was clicked!');
};

事件对象通常包含以下属性：

• type：事件类型，如 click、keyup 等。
• target：触发事件的 DOM 元素。
• currentTarget：当前正在处理事件的元素，可能与 target 不同。
• timeStamp：事件发生的时间戳。
• preventDefault()：阻止事件默认行为。
• stopPropagation()：停止事件冒泡。

KeyboardEvent

KeyboardEvent 是 Event 的一个子类，表示键盘事件。常见的键盘事件包括 keydown、keyup 和 keypress。

以下是在输入框中监听 Enter 键按下事件的示例代码：

const input = document.getElementById('my-input');

input.addEventListener('keydown', (event) => {
  if (event.key === 'Enter') {
    console.log('Enter key was pressed!');
  }
});

KeyboardEvent 对象通常包含以下属性：

• key：按下的键的键名。
• code：按下的键的物理键码。
• altKey、ctrlKey、metaKey、shiftKey：表示是否同时按下了 alt、ctrl、meta 或 shift 键等辅助键。
• repeat：表示该键是否被按住不放重复触发事件。

结语

在 JavaScript 中，Event 和 KeyboardEvent 使得我们可以在 DOM 上自由地处理用户的交互事件，为实现富交互界面提供了可能。我们需要熟练掌握这两个对象的基本用法，才能高效、准确地完成项目中的用户交互功能。