本文章来给大家介绍jQuery mouseenter与mouseleave 方法原理，它们其实就是鼠标指针离开与鼠标指针穿过元素一些效果，下面我来给各位介绍，有需要了解的朋友可参考。

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 与事件目标。