mouseenter/mouseleave 不支持事件委托，因其不冒泡且仅在元素可视边界触发；需用冒泡的 mouseover/mouseout 结合 relatedTarget 判断是否真正进出目标元素。
鼠标悬停（mouseenter 和 mouseleave）本身不支持原生事件委托，因为它们**不冒泡**；但你可以用 mouseover 和 mouseout 实现类似效果，再通过事件对象的 relatedTarget 过滤掉子元素干扰，模拟出委托式的悬停行为。
为什么不能直接用 mouseenter / mouseleave 委托？
mouseenter 和 mouseleave 被设计为“边界感知”事件：只在真正进入/离开绑定元素的**可视边界**时触发，且明确禁止冒泡。这意味着父元素监听不到子元素上的这两个事件——无法委托。
用 mouseover + mouseout 模拟委托式悬停
这两个事件会冒泡，适合委托，但需手动排除“在内部元素间移动”产生的误触发（比如从父 div 移到子 span，mouseout 会错误触发）。关键判断逻辑是：
- 检查
event.target是否匹配你关心的选择器（如.card） - 检查
event.relatedTarget是否在当前目标元素内部（即是否是它的后代） - 只有当
relatedTarget不在 目标元素内时，才视为真正的“移入”或“移出”
示例：给所有 .item 元素添加悬停高亮，使用委托方式绑定在 #list 上：
立即学习“Java免费学习笔记（深入）”；
const list = document.getElementById('list');
list.addEventListener('mouseover', (e) => {
const item = e.target.closest('.item');
if (!item) return;
// 确保是真正进入 .item，而非在它内部移动
if (!item.contains(e.relatedTarget)) {
item.classList.add('hovered');
}
});
list.addEventListener('mouseout', (e) => {
const item = e.target.closest('.item');
if (!item) return;
// 确保是真正离开 .item
if (!item.contains(e.relatedTarget)) {
item.classList.remove('hovered');
}
});
更简洁的封装思路（可复用）
可以封装一个轻量函数，自动处理进出逻辑：
function delegateHover(parent, selector, onEnter, onLeave) {
parent.addEventListener('mouseover', (e) => {
const target = e.target.closest(selector);
if (!target || target.contains(e.relatedTarget)) return;
onEnter.call(target, e);
});
parent.addEventListener('mouseout', (e) => {
const target = e.target.closest(selector);
if (!target || target.contains(e.relatedTarget)) return;
onLeave.call(target, e);
});
}
// 使用
delegateHover(
document.body,
'.btn',
() => console.log('进入按钮'),
() => console.log('离开按钮')
);
注意边界情况
以下情况需额外留意：
-
relatedTarget可能为null（例如鼠标从浏览器外移入页面），此时应视为“进入” - 若目标元素动态增删，委托天然兼容，无需重新绑定
- 避免同时混用
mouseenter/mouseleave和委托式mouseover/mouseout，易造成逻辑冲突
