事件对象如何使用

在 JavaScript 中，事件对象主要用于事件处理函数，以获取有关事件的详细信息或控制事件的行为。以下是一些常见的使用场景：

获取事件的详细信息

事件对象包含了与事件相关的各种信息，你可以在事件处理函数中访问这些信息。例如，如果你想知道用户点击了哪个按钮，你可以使用 event.target：

button.addEventListener('click', function(event) {
  console.log('Clicked button:', event.target);
});

或者，如果你想在用户按下键盘按键时知道他们按下了哪个键，你可以使用 event.key：

window.addEventListener('keydown', function(event) {
  console.log('Pressed key:', event.key);
});

阻止默认行为

有些浏览器事件有默认的行为，例如，点击链接会导航到新的 URL，提交表单会刷新页面。如果你想阻止这些默认行为，你可以在事件处理函数中调用 event.preventDefault()：

link.addEventListener('click', function(event) {
  event.preventDefault();
  console.log('Link was clicked but default action was prevented');
});

停止事件冒泡

在 DOM 中，事件会从触发事件的元素开始，向上通过元素树冒泡，直到到达根元素。如果你想阻止事件冒泡，你可以在事件处理函数中调用 event.stopPropagation()：

button.addEventListener('click', function(event) {
  event.stopPropagation();
  console.log('Button was clicked but event will not bubble up');
});

React 中的事件对象

在 React 中，事件对象的使用方式非常类似。主要的区别是你在 JSX 属性中提供事件处理函数，而不是直接在 DOM 元素上调用 addEventListener。

<button onClick={(event) => console.log('Clicked button:', event.target)}>
  Click me
</button>

React 的事件对象也提供了 preventDefault 和 stopPropagation 方法，你可以像在普通 JavaScript 中一样使用它们。

请注意，由于 React 使用的是合成事件，所以事件对象可能会在事件处理函数之后被重用。如果你需要在异步代码中访问事件对象，你需要调用 event.persist() 以从池中移除事件对象。

<button onClick={(event) => {
  event.persist();
  setTimeout(() => console.log('Clicked button:', event.target), 1000);
}}>
  Click me
</button>

在这个示例中，我们在 1 秒后异步访问了事件对象。如果没有调用 event.persist()，这将无法工作，因为 React 可能会在那之前重用事件对象。