本文介绍在原生 javascript 中高效地为同一元素的多个事件（如 mouseenter 和 mouseleave）复用同一个事件处理函数的两种推荐方式，避免重复代码，兼顾可读性与兼容性。
本文介绍在原生 javascript 中高效地为同一元素的多个事件（如 mouseenter 和 mouseleave）复用同一个事件处理函数的两种推荐方式，避免重复代码，兼顾可读性与兼容性。
在开发交互式 UI 时，常需对成对事件（如 mouseenter/mouseleave、focus/blur、keydown/keyup）执行相同逻辑——例如切换状态类名、触发动画或更新 DOM。遗憾的是，addEventListener() 不支持类似 "mouseenter or mouseleave" 的复合事件字符串语法（该写法在 JavaScript 中语法错误，且浏览器不识别）。因此，必须显式为每个事件类型分别注册监听器。
✅ 推荐方案一：链式调用（清晰、兼容性最佳）
适用于需要最大浏览器兼容性（包括 IE11 及更早版本）或逻辑简单明确的场景：
function handleHover(event) {
if (event.type === 'mouseenter') {
event.target.classList.add('hovered');
} else if (event.type === 'mouseleave') {
event.target.classList.remove('hovered');
}
}
const element = document.getElementById('myButton');
element.addEventListener('mouseenter', handleHover);
element.addEventListener('mouseleave', handleHover);✅ 推荐方案二：数组遍历（简洁、现代语法）
适用于支持 ES6+ 的环境（Chrome 51+、Firefox 45+、Safari 10+、Edge 14+），代码更紧凑：
const element = document.getElementById('myButton');
function handleHover(event) {
event.target.classList.toggle('hovered', event.type === 'mouseenter');
}
['mouseenter', 'mouseleave'].forEach(type => {
element.addEventListener(type, handleHover);
});⚠️ 注意事项：
- 不要使用事件委托替代多事件绑定：虽然 event.type 可区分事件类型，但委托本身解决的是动态元素问题，而非简化多事件注册；本场景中直接绑定更直观高效。
- 避免在循环中创建闭包函数：若将处理函数内联在 forEach 中（如 element.addEventListener(type, () => {...})），每次都会新建函数实例，不利于事件移除（removeEventListener）和内存管理；应始终复用同一函数引用。
- 事件移除需对应：若后续需清理监听器，请确保使用相同函数引用——例如用 element.removeEventListener('mouseenter', handleHover)，而非匿名函数。
? 总结：原生 JavaScript 中无法“一次性”监听多个事件类型，但通过两次 addEventListener 调用或数组遍历，即可安全、高效、语义清晰地实现逻辑复用。优先选择语义明确、易维护的方式，而非追求语法糖式的“简写”。
