JavaScript 的 addEventListener 不支持直接用逻辑运算符（如 ||）同时监听多个事件，但可通过循环或重复调用方式，高效地将同一处理函数绑定到多个事件（如 mouseenter 和 mouseleave）。
javascript 的 `addeventlistener` 不支持直接用逻辑运算符（如 `||`）同时监听多个事件，但可通过循环或重复调用方式，高效地将同一处理函数绑定到多个事件（如 `mouseenter` 和 `mouseleave`）。
在日常前端开发中，我们常需对成对的交互事件（如 mouseenter/mouseleave、keydown/keyup、focus/blur）执行相同的逻辑处理——例如切换元素状态、触发动画、更新样式等。此时，一个自然的疑问是：能否像 jQuery 的 .on('mouseenter mouseleave', handler) 那样，在原生 JavaScript 中“一次性”为多个事件注册同一个监听器？
答案是：addEventListener 本身不支持事件名拼接或逻辑表达式（如 "mouseenter" || "mouseleave"），该写法在语法上无效，且会因布尔运算导致事件类型被强制转为字符串 "true" 或 "false"，从而完全失效。
✅ 正确做法是显式地为每个事件分别添加监听器。最清晰、可读性最强的方式是两次独立调用：
function handleHover(event) {
if (event.type === 'mouseenter') {
event.target.classList.add('hovered');
} else if (event.type === 'mouseleave') {
event.target.classList.remove('hovered');
}
}
element.addEventListener('mouseenter', handleHover);
element.addEventListener('mouseleave', handleHover);✅ 更简洁、可扩展的写法是使用数组 + forEach，尤其适用于需绑定 3 个及以上事件的场景：
立即学习“Java免费学习笔记（深入）”；
const hoverEvents = ['mouseenter', 'mouseleave'];
hoverEvents.forEach(type => {
element.addEventListener(type, handleHover);
});⚠️ 注意事项：
- 避免内存泄漏：若后续需移除监听器（如组件卸载时），请确保使用相同引用的函数（不可用匿名函数），并为每个事件单独调用 removeEventListener；推荐使用 forEach 绑定时，也用对应循环解绑。
- 事件对象区分：同一函数内可通过 event.type 准确判断当前触发的是哪个事件，无需额外闭包或参数封装。
- 性能无差异：两种写法底层均创建独立监听器，浏览器优化成熟，无需担心性能损耗。
- 不推荐“伪合并”写法：如 element.addEventListener('mouseenter mouseleave', ...) 是无效的——addEventListener 仅接受单个事件类型字符串，多余内容会被忽略或报错。
总结：原生 JavaScript 中不存在“多事件单注册”的语法糖，但通过语义清晰的重复绑定或数组遍历，既能保持代码简洁性与可维护性，又完全符合标准规范。这是兼顾可读性、健壮性与现代开发实践的最佳实践。
