mouseover和mouseenter的区别

_谦龙 发布在谦龙的小天地2017年6月5日view：111HTML5BrettBat性能优化正则表达式前端工程师面试闭包高阶函数DOMES6

在文章任何区域双击击即可给文章添加【评注】！浮到评注点上可以查看详情。

隐藏标注

前言

原文地址

项目地址

不知道大家在面试或者工作过程中有没有被mouseover和mouseenter(对应的是mouseout和mouseleave)事件所困扰。自己之前在面试的时候就有被问到诸如mouseover和mouseenter事件的异同之类的问题？当时没有答出来，一直也对这两个事件有点模糊不清，趁着最近正在读zepto源码，准备写一篇这方面的文章，如果有错误，请大家指正。

<!--more-->

mouseenter与mouseover的异同？

要说清楚mouseenter与mouseover有什么不同，也许可以从两方面去讲。

1. 是否支持冒泡
2. 事件的触发时机

先来看一张图,对这两个事件有一个简单直观的感受。

再看看官网对mouseenter的解释

mouseenter | onmouseenter event

The event fires only if the mouse pointer is outside the boundaries of the object and the user moves the mouse pointer inside the boundaries of the object. If the mouse pointer is currently inside the boundaries of the object, for the event to fire, the user must move the mouse pointer outside the boundaries of the object and then back inside the boundaries of the object.

大概意思是说：当鼠标从元素的边界之外移入元素的边界之内时，事件被触发。而当鼠标本身在元素边界内时，要触发该事件，必须先将鼠标移出元素边界外，再次移入才能触发。(英语比较渣