推荐使用 event.type 获取标准小写事件名（如"click"），通过 switch 或 if 分支统一处理多种交互，适用于表单、画布等需差异化响应的场景，简洁可靠且减少内存占用。

直接用 event.type 获取事件类型字符串，再用 if 或 switch 分支处理即可。它返回的是标准事件名（如 "click"、"input"、"keydown"），无需额外解析，是动态判断最简洁可靠的方式。

基础写法：if 判断 + event.type

在事件监听器中直接读取 event.type，按需执行不同逻辑：

• if (event.type === "click") { /* 处理点击 */ }
• else if (event.type === "input") { /* 处理输入变化 */ }
• else if (event.type === "blur") { /* 处理失焦 */ }

推荐写法：switch 替代多层 if

当事件类型较多时，switch 更清晰、性能略优：

element.addEventListener("click", handler);
element.addEventListener("input", handler);
element.addEventListener("keydown", handler);
<p>function handler(event) {
switch (event.type) {
case "click":
console.log("按钮被点击");
break;
case "input":
console.log("输入框内容改变:", event.target.value);
break;
case "keydown":
if (event.key === "Enter") {
console.log("按下了回车");
}
break;
}
}

注意 event.type 的大小写和标准命名

event.type 始终返回小写、规范的 DOM 事件名，与你绑定时写的字符串一致：

• 绑定 "Click" 不会触发——必须用小写 "click"
• 自定义事件也适用：element.dispatchEvent(new CustomEvent("my-event")) → event.type === "my-event"
• 合成事件（如 React）中仍可访问原生事件：event.nativeEvent.type

实际场景：单个监听器统一响应多种交互

适合表单控件、富文本区域等需对多种用户操作做差异化响应的场景：

• 文本框：点击聚焦、输入更新、回车提交、失去焦点校验——全在一个 handler 里分发
• 画布元素：鼠标按下/移动/抬起、触摸开始/移动/结束、键盘快捷键——统一入口，按 type 路由
• 避免重复绑定多个监听器，减少内存占用和事件注册开销