Typescript: 整理组件和DOM 事件的几种常用事件参数类型

在TypeScript中，组件和DOM事件的参数类型可以有很多种，但最常见的几种包括：

1. MouseEvent<T>：用于鼠标事件，其中T通常是HTMLButtonElement、HTMLDivElement等DOM元素类型。
2. KeyboardEvent<T>：用于键盘事件，其中T通常是HTMLInputElement、HTMLTextAreaElement等表单元素类型。
3. FocusEvent<T>：用于焦点事件，其中T通常是HTMLInputElement、HTMLTextAreaElement等表单元素类型。
4. FormEvent<T>：用于表单事件，其中T通常是HTMLFormElement等表单元素类型。

以下是一些示例代码：

import { MouseEventHandler, KeyboardEventHandler, FocusEventHandler, FormEventHandler } from 'react';
 
// 示例1: 鼠标点击事件
const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {
  console.log(event.clientX, event.clientY);
};
 
// 示例2: 键盘按键事件
const handleKeyPress: KeyboardEventHandler<HTMLInputElement> = (event) => {
  console.log(event.key);
};
 
// 示例3: 输入框获得焦点事件
const handleFocus: FocusEventHandler<HTMLInputElement> = (event) => {
  console.log(event.target.value);
};
 
// 示例4: 表单提交事件
const handleSubmit: FormEventHandler<HTMLFormElement> = (event) => {
  event.preventDefault(); // 阻止表单默认提交行为
  console.log('Form submitted');
};

这些是React中的例子，但是在其他框架或纯TypeScript项目中，你可能会看到类似的类型定义。