用 mouseover/mouseout 事件代理模拟 mouseenter/mouseleave

mouseenter 和 mouseleave 事件因其"不冒泡"和"只在元素边界穿越时触发"的特性，常被用于实现悬停效果（如显示工具提示、菜单展开等）。然而，在某些场景下（如需要为大量动态元素绑定事件），直接使用 mouseenter/mouseleave 可能效率低下。此时，利用 事件代理 （Event Delegation）结合 mouseover/mouseout 事件来模拟 mouseenter/mouseleave 的行为，是一种高效且强大的替代方案。

一、核心概念回顾

mouseover / mouseout:

- 冒泡 : 这两个事件会从触发的最深层 DOM 元素开始，逐级向上传播到 document。
- 触发频繁 : 当鼠标在元素内部移动，从一个子元素移动到另一个子元素时，即使鼠标没有离开父元素的边界，也会触发 mouseout (离开第一个子元素) 和 mouseover (进入第二个子元素)。这通常不是我们想要的"悬停"语义。

mouseenter / mouseleave:

- 不冒泡 : 这两个事件不会冒泡。mouseenter 只在鼠标首次进入 目标元素（或其任何后代）时触发一次。mouseleave 只在鼠标完全离开目标元素（及其所有后代）时触发一次。
- 语义清晰: 完美匹配"进入元素区域"和"离开元素区域"的需求。

事件代理 (Event Delegation) :

- 原理 : 将事件监听器绑定在目标元素的一个公共祖先上，而不是每个目标元素本身。利用事件冒泡机制，祖先元素可以捕获发生在其后代身上的事件。
- 优势: 极大减少事件监听器的数量，内存占用低，性能高，尤其适合处理动态添加/移除的元素。

二、模拟的核心：`relatedTarget`

mouseover 和 mouseout 事件对象有一个关键属性：relatedTarget。

mouseover 事件:

- event.target: 鼠标进入的元素。
- event.relatedTarget: 鼠标来自的元素（即鼠标离开的那个元素）。如果鼠标是从文档外部进入，则 relatedTarget 为 null。

mouseout 事件:

- event.target: 鼠标离开的元素。
- event.relatedTarget: 鼠标前往的元素（即鼠标进入的那个元素）。如果鼠标是移出文档，则 relatedTarget 为 null。

模拟的关键判断逻辑：

我们可以利用 target 和 relatedTarget 的关系来判断鼠标是否真正"穿越"了目标元素的边界。

模拟 mouseenter:

当鼠标进入一个元素 A 时，如果 relatedTarget 不是 A 的后代（或为 null），则说明鼠标是从 A 的外部进入的。这等同于 mouseenter。

伪代码：

css 复制代码

if (target === A || A.contains(target)) { // 事件发生在 A 或其后代
  if (!relatedTarget || !A.contains(relatedTarget)) { // relatedTarget 不是 A 的后代或为 null
    // 触发模拟的 mouseenter
  }
}

模拟 mouseleave:

当鼠标离开一个元素 A 时，如果 relatedTarget 不是 A 的后代（或为 null），则说明鼠标是离开 A 前往外部。这等同于 mouseleave。

伪代码：

css 复制代码

if (target === A || A.contains(target)) { // 事件发生在 A 或其后代
  if (!relatedTarget || !A.contains(relatedTarget)) { // relatedTarget 不是 A 的后代或为 null
    // 触发模拟的 mouseleave
  }
}

注意 : 两个模拟的判断条件完全相同 ！区别仅在于你监听的是 mouseover 还是 mouseout 事件。

三、实现：一个生产级的代理服务

下面是一个完整的、可复用的 JavaScript 类，用于实现这一模拟。

javascript 复制代码

/**
 * 使用事件代理，通过 mouseover/mouseout 模拟 mouseenter/mouseleave
 * 适用于需要监控大量动态元素的场景
 */
class MouseEnterLeaveProxy {
  /**
   * @param {string|HTMLElement} containerSelector - 代理容器的选择器或元素
   */
  constructor(containerSelector) {
    this.container = typeof containerSelector === 'string' 
      ? document.querySelector(containerSelector) 
      : containerSelector;
    
    if (!this.container) throw new Error('代理容器未找到');

    this.targets = new Map(); // 存储目标元素及其回调
    this.handleMouseOver = this.handleMouseOver.bind(this);
    this.handleMouseOut = this.handleMouseOut.bind(this);

    this.start();
  }

  start() {
    this.container.addEventListener('mouseover', this.handleMouseOver);
    this.container.addEventListener('mouseout', this.handleMouseOut);
  }

  stop() {
    this.container.removeEventListener('mouseover', this.handleMouseOver);
    this.container.removeEventListener('mouseout', this.handleMouseOut);
  }

  /**
   * 注册一个需要监控的目标元素
   * @param {string} selector 
   * @param {Object} handlers - { onEnter: Function, onLeave: Function }
   */
  register(selector, handlers) {
    this.targets.set(selector, handlers);
  }

  /**
   * 注销一个目标元素
   * @param {string} selector 
   */
  unregister(selector) {
    this.targets.delete(selector);
  }

  handleMouseOver(event) {
    const { target, relatedTarget } = event;
    
    if (!this.container.contains(target)) return;

    for (const [selector, handlers] of this.targets.entries()) {

      const targetElement = target.closest(selector);

      if(!targetElement) continue
      
      // 核心判断：relatedTarget 不是目标元素的后代或为 null
      if (!relatedTarget || !targetElement.contains(relatedTarget)) {
        try {
          handlers.onEnter({ event, target });
        } catch (error) {
          console.error('onEnter 回调错误', error);
        }
      }
    }
  }

  handleMouseOut(event) {
    const { target, relatedTarget } = event;
    if (!this.container.contains(target)) return;

    for (const [selector, handlers] of this.targets.entries()) {

      const targetElement = target.closest(selector);

      if(!targetElement) continue
      
      if (!relatedTarget || !targetElement.contains(relatedTarget)) {
        try {
          handlers.onLeave({ event, target });
        } catch (error) {
          console.error('onLeave 回调错误', error);
        }
      }
    }
  }

  destroy() {
    this.stop();
    this.targets.clear();
  }
}

html 复制代码

<!DOCTYPE html>
<html>
  <head>
    <style>
      #grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        padding: 20px;
      }
      .grid-item {
        height: 100px;
        border: 2px solid #ddd;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
      }
      button {
        padding: 10px 20px;
      }
    </style>
  </head>
  <body>
    <button id="add-btn">添加新项</button>
    <div id="grid-container">
      <!-- 项将由 JavaScript 动态添加 -->
    </div>
    <script src="./mouseenter-proxy.js"></script>
    <script>
      // --- 使用示例 ---
      document.addEventListener('DOMContentLoaded', () => {
        // 创建代理服务，代理 #grid-container 内的所有 .grid-item
        const proxy = new MouseEnterLeaveProxy('#grid-container')

        // 定义悬停处理逻辑
        const hoverHandlers = {
          onEnter: (context) => {
            context.target.style.backgroundColor = '#e6f7ff'
            context.target.style.transform = 'scale(1.02)'
          },
          onLeave: (context) => {
            context.target.style.backgroundColor = ''
            context.target.style.transform = ''
          },
        }

        proxy.register('.grid-item', hoverHandlers) // 关键：注册

        // 动态添加新项时，注册到代理服务
        function addItem() {
          const item = document.createElement('div')
          item.className = 'grid-item'
          item.textContent = 'Hover Me'
          document.getElementById('grid-container').appendChild(item)
        }

        // 初始化几个项
        for (let i = 0; i < 3; i++) addItem()

        // 添加按钮
        document.getElementById('add-btn').addEventListener('click', addItem)
      })
    </script>
  </body>
</html>

四、为什么使用此模式？

性能卓越 : 无论 #grid-container 中有多少 .grid-item，都只有两个事件监听器 (mouseover, mouseout)。添加/移除元素只需调用 register/unregister，无需绑定/解绑事件。
支持动态元素: 新创建的元素可以随时注册，移除的元素可以注销，完美支持 SPA 和动态 UI。
内存友好: 避免了为每个元素创建闭包和监听器，减少了内存占用。
精确控制 : 提供了与 mouseenter/mouseleave 相同的语义，同时拥有事件代理的所有优势。

五、注意事项

relatedTarget 兼容性: 现代浏览器支持良好。
contains 方法 : 用于检查元素包含关系。注意 element.contains(element) 返回 true。
清理 : 务必在组件销毁或页面卸载时调用 destroy() 或 stop()，避免内存泄漏。