如何在现代浏览器中实现mousein事件的等效功能？

咱们先理清两个容易混淆的鼠标离开事件：mouseout和mouseleave，它们的核心区别在于触发范围：

• mouseleave：只在指针完全离开被监听的元素本身时触发。哪怕你在元素的子元素之间来回移动，它也不会有反应，只有当你彻底走出这个元素的边界时，才会触发一次。
• mouseout：触发范围更广——不仅在离开被监听元素时触发，当指针从元素移动到它的任意子元素上时，也会触发。所以如果元素嵌套了很多子元素，指针在里面穿梭时，mouseout可能会触发好多次。

关于“消失”的mousein事件 #

不少人会疑惑：既然有mouseout，那对应的mousein事件去哪了？

其实根本不存在标准的mousein事件，相关的标准事件只有mouseleave、mouseout和mouseenter。而和mouseout行为对应的“进入”事件，其实是mouseover——它的触发逻辑和mouseout完全对应：当指针进入元素或其子元素时都会触发，正好填补了你想要的mousein的功能空白。

针对动态元素的解决方案 #

如果你需要在指针进入每个元素（包括后续动态创建的元素）时执行代码，用mouseover配合事件委托就能实现。不需要给每个元素单独绑定监听，只要把事件绑定到一个静态的父元素（甚至document）上，通过事件对象的target属性获取实际触发的元素即可：

document.addEventListener('mouseover', function(e) {
  // e.target就是当前鼠标进入的元素
  console.log('鼠标进入了:', e.target);
  // 在这里编写你的业务逻辑
});

这样不管是页面初始就有的元素，还是后来动态生成的，都能被监听到，完美解决你的场景需求。

内容的提问来源于stack exchange，提问作者Andrey Mikhaylov - lolmaus