jQuery mouseenter与mouseleave 方法原理

时间：2013-07-01 编辑：简简单单来源：一聚教程网

mouseenter

当鼠标指针穿过元素时，会发生 mouseenter 事件。

语法

$(selector).mouseenter()

例

代码如下	复制代码
$("p").mouseenter(function(){ $("p").css("background-color","#E9E9E4"); });

mouseleave

当鼠标指针离开元素时，会发生 mouseleave 事件。

触发 mouseleave 事件

语法

$(selector).mouseleave()

例

代码如下	复制代码
$("p").mouseleave(function(){ $("p").css("background-color","#E9E9E4"); });

注意：该事件大多数时候会与 mouseenter 事件一起使用，mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数

印象中可能认为其只是对 mouseover / mouseout 的简单封装。

代码如下	复制代码
hover: function( fnOver, fnOut ) { return this.mouseenter( fnOver ).mouseleave( fnOut \|\| fnOver ); }

然而当我们翻开源码会发现，函数中并没有 mouseover / mouseout 的身影，

那 mouseenter / mouseleave 是什么？让我们先通过一个 DEMO 来感受下！

从 DEMO 中我们可以发现 mouseenter / mouseleave 绑定的事件处理程序，

只有当鼠标指针进入（离开）元素时才会执行，元素内鼠标移动操作则被忽略！

代码如下	复制代码
// Add relatedTarget, if necessary if ( !event.relatedTarget && fromElement ) { event.relatedTarget = fromElement === event.target ? original.toElement : fromElement; }

为了实现这一判断需要在鼠标移动时实时捕获移入 / 移出鼠标的元素进行比较，

高版本浏览器（Chrome / Firefox / IE9+）可通过 event.relatedTarget 获取，

低版本浏览器（IE6/7/8）则可通过 event.fromElement 与事件目标对比实现。

代码如下	复制代码
// For mousenter/leave call the handler if related is outside the target. // NB: No relatedTarget if the mouse left/entered the browser window if ( !related \|\| (related !== target && !jQuery.contains( target, related )) ) { event.type = handleObj.origType; ret = handleObj.handler.apply( this, arguments ); event.type = fix; }

最后附上 mouseenter / mouseleave 被触发时 handle 核心源码供大家参考，

判断条件 related 与 target 对应已封装好的 event.relatedTarget 与事件目标。