The principle of jQuery MouseEnter and MouseLeave method

MouseEnter

The MouseEnter event occurs when the mouse pointer crosses an element.

Grammar

$ (selector). MouseEnter ()

Cases

The code is as follows	Copy Code
$ ("P"). MouseEnter (function () { $ ("P"). CSS ("Background-color", "#E9E9E4"); });

MouseLeave

The MouseLeave event occurs when the mouse pointer leaves an element.

Trigger MouseLeave Event

Grammar

$ (selector). MouseLeave ()

Cases

The code is as follows	Copy Code
$ ("P"). MouseLeave (function () { $ ("P"). CSS ("Background-color", "#E9E9E4"); });

Note: This event is most often used with the MouseEnter event, the MouseLeave () method triggers the MouseLeave event, or the function that runs when the MouseLeave event occurs

The impression may be that it is just a simple encapsulation of the mouseover/mouseout.

The code is as follows	Copy Code
Hover:function (Fnover, fnout) { Return This.mouseenter (Fnover). MouseLeave (Fnout | | fnover); }

However, when we open the source will find that the function does not mouseover/mouseout figure,

What's that mouseenter/mouseleave? Let us first through a DEMO to feel!

From the DEMO we can find the Mouseenter/mouseleave bound event handler,

Only executes when the mouse pointer enters (leaves) the element, and the mouse movement within the element is ignored!

The code is as follows	Copy Code
Add Relatedtarget, if necessary if (!event.relatedtarget && fromelement) { Event.relatedtarget = Fromelement = = Event.target? Original.toElement:fromElement; }

In order to achieve this judgment, it is necessary to capture the elements of moving/moving the mouse in real time while the mouse is moving,

High-version browsers (chrome/firefox/ie9+) can be obtained by Event.relatedtarget,

The low version browser (IE6/7/8) can be implemented by comparing the event.fromelement to the event target.

The code is as follows	Copy Code
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; }

Finally attached mouseenter/mouseleave is triggered when handle core source code for everyone to reference,

The criteria related and target correspond to the encapsulated Event.relatedtarget and event targets.