事件处理

React 中事件命名采用驼峰式书写，并且需要传入一个函数作为事件处理函数。在函数组件中，一个事件的处理函数常常作为组件内的函数存在，在实际定义时可以使用关键字function也可以直接定义一个匿名剪头函数。例如以下是一个最简单的响应<button>元素点击事件的例子。

function Button(props) {
  function handleClick() {
    alert("Clicked!");
  }

  return <button onClick={handleClick}>{props.children}</button>;
}

但是这种function中套function的写法看起来属实比较怪，所以在实际使用中，常常都是使用匿名剪头函数来定义，例如：

function Button(props) {
  const handleClick = () => {
    alert("Clicked!");
  };

  return <button onClick={handleClick}>{props.children}</button>;
}

甚至还可以直接在onClick的位置定义匿名函数。

function Button(props) {
  return <button onClick={() => alert("Clicked!")}>{props.children}</button>;
}

优化事件处理函数定义

与useMemo一样，在事件处理函数中如果访问了组件的 State 等内容，实际上也是一种开销。一种比较好的解决方法依旧是将事件处理函数缓存起来，等到它内部所使用的值发生变化的时候再重新渲染。

于是 React 中提供的另一个 Hook useCallback就派上用场了，useCallback可以在组件的多次渲染中缓存其所定义的函数。useCallback的使用方法与useMemo基本上一致，其接受的参数也是一个需要缓存的函数和一个dependencies依赖项列表。

事件冒泡

事件冒泡通常是指事件在触发以后，沿着组件树向组件树的根节点传播。在传统 HTML DOM 编程中，我们常常使用e.stopPropagation()来阻止事件继续冒泡。

但是如果需要在事件被阻止冒泡以后继续被捕获，那么就可以在组件树上使用事件带有Capture后缀的版本来对其进行捕获。例如：

function Compo() {
  return (
    <div
      onClickCapture={() => {
        /* 将先于子元素的onClick处理执行 */
      }}
    >
      <button onClick={() => e.stopPropagation()}>Click</button>
    </div>
  );
}

事件默认行为

在 HTML DOM 中，浏览器对一些事件是有默认处理行为的，例如<form>的onSubmit，会导致页面的刷新。要阻止这种默认行为，在 React 中的处理与 HTML DOM 中的处理一样，都是通过调用e.preventDefault()来实现的。

事件类型

React 对于常见的 HTML 元素标签都提供了封装，同时也提供了相应事件的封装。在定义事件处理函数时，可以使用 React 提供的类型来接收和处理元素产生的事件。在 React 中经过包装的事件被称为合成事件，即SyntheticEvent<E>类型对象。React 中的绝大多数事件类型都是从SyntheticEvent<E>类型派生而来。

例如可以这样捕获input产生的输入事件。

function Input() {
  const [value, setValue] = useState<string | null>(null);
  const handleInput = (e: InputEvent) => {
    setValue(e.data);
  };

  return <input value={value} onChange={handleInput} />;
}

React 将 HTML DOM 的原生事件包装进了SyntheticEvent的nativeEvent属性中，在必要的时候可以通过这个属性来访问浏览器的原生事件。除了nativeEvent以外，SyntheticEvent类型还提供了以下标准属性可供使用。

• bubbles：布尔值，用于表示事件是否会冒泡传播。
• cancelable：布尔值，用于表示事件是否可以被取消。
• currentTarget：DOM 节点，用来获取当前节点在 React DOM 树中的位置。
• defaultPrevented：布尔值，用来表示是否调用了preventDefault()方法。
• eventPhase：数字值，用来表示当前事件所处的阶段。
• isTrusted：布尔值，用来返回事件是否由用户发起。
• target：DOM 节点，用来返回事件发生的节点。
• timestamp：数字值，用来返回事件发生的时间。

常用事件及其对应类型

以下事件监听属性适用于所有内置组件

以下事件监听属性适用于<form>元素

以下事件监听属性适用于<dialog>元素

以下事件监听属性适用于<details>元素

以下事件监听属性适用于<img>、<iframe>、<object>、<embed>、<link>、SVG 中的<image>元素

以下事件监听属性适用于<audio>、<video>元素