Mousemove：
当鼠标指针在元素内移动时，mousemove事件就会被触发，任何HTML元素都可以接受此事件。
Mousemove事件是当鼠标指针移动时触发的，即使是一个像素。这意味着多个事件在短时间内被触发。如果处理器做任何重大的处理，或者如果该事件存在多个处理函数，这可能造成浏览器的严重的性能问题。因此，优化mousemove处理程序尽可能，这一点很重要，当不再需要他们时应尽快解除绑定。
一个常见的模式是在mousedown处理器内部绑定mousemove处理器，并在一个相应mouseup处理函数解除绑定。要实现这一系列事件，请记住，与mouseup事件相比，mouseup事件可能会被发送到不同的 HTML 元素上。由于这个原因，mouseup事件通常应该绑定在更高的 DOM 树中，例如<body>。
<div id="outer">Outer<div id="inner"> Inner</div></div><div id="other">Trigger the handler</div><div id="log"></div>
Mouseover VS Mouseenter
Mouseover
由于此事件类型冒泡，可能导致引起的很多头痛的问题。例如，在这个例子中当鼠标指针移出Inner元素，mouseover事件将被发送到Inner元素，然后冒泡到Outer元素 。这可能会不合时宜的触发绑定的mouseover处理函数。
Mouseenter
MouseenterJavaScript事件是Internet Explorer专有的。由于该事件在平时很有用，jQuery的模拟这一事件，以便它可用于所有浏览器。该事件在鼠标移入到元素上时被触发。任何HTML元素都可以接受此事件。
例子：
当触发 mouseover 和 mouseenter 事件时，显示鼠标移出对象的次数。当鼠标移入绑定 mouseover 事件元素的子元素时，mouseover 事件同样会被触发。但是，只有在绑定 mouseenter 事件的元素上，将鼠标移入时，才会触发该事件。
Mouseout VS Mouseleave
Mouseout:
由于此事件类型冒泡，可能导致引起的很多头痛的问题。例如，在这个例子中当鼠标指针移出Inner元素，mouseout事件将被发送到Inner元素，然后冒泡到Outer元素 。这可能会不合时宜的触发绑定的mouseout处理函数。
Mouseleave
MouseleaveJavaScript事件是Internet Explorer专有的。。由于该事件在平时很有用，jQuery的模拟这一事件，以便它可用于所有浏览器。该事件在鼠标离开元素上时被触发。任何HTML元素都可以接受此事件。
例子：
当触发 mouseout 和 mouseleave 事件时，显示鼠标移出对象的次数。当鼠标移出绑定 mouseout 事件元素的子元素时，mouseout 事件同样会被触发。但是，只有在绑定 mouseleave 事件的元素上，将鼠标移出时，才会触发该事件。
<!DOCTYPE html><html><head><style><span style="white-space:pre"></span>div.out {width:40%;height:120px;margin:0 15px;background-color:#D6EDFC;float:left;}<span style="white-space:pre"></span>div.in {width:60%;height:60%;background-color:#FFCC00;margin:10px auto;}<span style="white-space:pre"></span>p {line-height:1em;margin:0;padding:0;}</style><script src="/jquery/1.11.2/jquery.min.js"></script></head><body><div class="out overout"><p>move your mouse</p><div class="in overout"><p>move your mouse</p><p>0</p></div><p>0</p></div><div class="out enterleave"><p>move your mouse</p><div class="in enterleave"><p>move your mouse</p><p>0</p></div><p>0</p></div><script><span style="white-space:pre"></span>var i = 0;<span style="white-space:pre"></span>$("div.overout").mouseout(function(){<span style="white-space:pre"></span> $("p:first",this).text("mouse out");<span style="white-space:pre"></span> $("p:last",this).text(++i);<span style="white-space:pre"></span>}).mouseover(function(){<span style="white-space:pre"></span>$("p:first",this).text("mouse over");<span style="white-space:pre"></span>});<span style="white-space:pre"></span>var n = 0;<span style="white-space:pre"></span>$("div.enterleave").bind("mouseenter",function(){<span style="white-space:pre"></span> $("p:first",this).text("mouse enter");<span style="white-space:pre"></span>}).bind("mouseleave",function(){<span style="white-space:pre"></span> $("p:first",this).text("mouse leave");<span style="white-space:pre"></span> $("p:last",this).text(++n);<span style="white-space:pre"></span>});</script></body></html>
参考自：/category/events/mouse-events/
