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

举个栗子， input 输入框的值变化事件onChange。

 const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    const { target: { value }} = e;
  };

 //onChange={(e) => { handleChange(e);}}

常用表单组件的事件： 

• ChangeEvent<HTMLInputElement>：用于 input 输入框的值变化事件。
• ChangeEvent<HTMLTextAreaElement>：用于 textarea 输入框的值变化事件。
• ChangeEvent<HTMLSelectElement>：用于 select 下拉框的值变化事件。
• ChangeEvent<HTMLCheckboxElement>：用于 checkbox 复选框的值变化事件。
• ChangeEvent<HTMLRadioElement>：用于 radio 单选框的值变化事件。
• FormEvent<HTMLFormElement>：表单提交事件参数类型，用于处理 form 元素的提交事件

 常见的Dom事件的事件参数类型：

• MouseEvent<HTMLButtonElement>：鼠标事件参数类型，用于处理点击事件
• KeyboardEvent<HTMLInputElement>：键盘事件参数类型
• MouseEvent<HTMLAnchorElement>：链接事件参数类型，用于处理 a 元素的点击事件
• DragEvent<HTMLDivElement>：拖拽事件参数类型，用于处理 div 等元素的拖拽事件
• ChangeEvent<HTMLInputElement>：表单元素值变化事件参数类型
• FocusEvent<HTMLInputElement>：表单元素获得或失去焦点事件参数类型
• ResizeEvent<HTMLDivElement>：窗口或元素大小变化事件参数类型
• ClipboardEvent<HTMLInputElement>：剪贴板事件参数类型，用于处理 input 等元素的剪贴板事件
• WheelEvent<HTMLDivElement>：滚轮事件参数类型，用于处理 div 等元素的滚轮事件