经过绑定元素时会多次触发mouseover和mouseout事件

当处理绑定元素上的 `mouseover` 和 `mouseout` 事件时，确实可能会因为鼠标的快速移动或元素内部的子元素边界而导致事件被多次触发。这通常会导致不必要的性能开销或逻辑错误。为了解决这个问题，你可以考虑以下几种方法：

1. **防抖（Debouncing）**：

防抖技术确保了一个函数在事件被触发n秒后再执行，如果在这n秒内又被触发，则重新计时。这适用于`mouseover`和`mouseout`，但通常更常用于如输入框输入、窗口大小调整等场景。

2. **节流（Throttling）**：

节流技术确保了一个函数在特定时间内只执行一次，无论事件被触发多少次。这在处理如`mouseover`和`mouseout`等频繁触发的事件时非常有用。

下面是一个简单的节流函数的实现，用于处理`mouseover`和`mouseout`事件：

function throttle(func, limit) {
    let lastFunc;
    let lastRan;
    return function() {
        const context = this;
        const args = arguments;
        if (!lastRan) {
            func.apply(context, args);
            lastRan = Date.now();
        } else {
            clearTimeout(lastFunc);
            lastFunc = setTimeout(function() {
                if ((Date.now() - lastRan) >= limit) {
                    func.apply(context, args);
                    lastRan = Date.now();
                }
            }, limit - (Date.now() - lastRan));
        }
    }
}

// 使用示例
const element = document.getElementById('your-element-id');

const mouseOverHandler = throttle(function() {
    console.log('Mouse over triggered');
}, 200); // 限制每200ms最多触发一次

const mouseOutHandler = throttle(function() {
    console.log('Mouse out triggered');
}, 200); // 同样，每200ms最多触发一次

element.addEventListener('mouseover', mouseOverHandler);
element.addEventListener('mouseout', mouseOutHandler);

这段代码通过节流函数确保了`mouseover`和`mouseout`事件在指定的时间间隔内（在这个例子中是200毫秒）最多只会被处理一次，从而减少了事件处理函数的调用次数，提高了性能。