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
Mouseenter JavaScript事件是Internet Explorer专有的。由于该事件在平时很有用,jQuery的模拟这一事件,以便它可用于所有浏览器。该事件在鼠标移入到元素上时被触发。任何HTML元素都可以接受此事件。
例子:
当触发 mouseover 和 mouseenter 事件时,显示鼠标移出对象的次数。当鼠标移入绑定 mouseover 事件元素的子元素时,mouseover 事件同样会被触发。但是,只有在绑定 mouseenter 事件的元素上,将鼠标移入时,才会触发该事件。
Mouseout VS Mouseleave
Mouseout:
由于此事件类型冒泡,可能导致引起的很多头痛的问题。例如,在这个例子中当鼠标指针移出Inner元素,mouseout事件将被发送到Inner元素,然后冒泡到Outer元素 。这可能会不合时宜的触发绑定的mouseout处理函数。
Mouseleave
Mouseleave JavaScript事件是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="http://cdn.bootcss.com/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>
参考自:http://www.jquery123.com/category/events/mouse-events/