mouseover與mouseenter與mousemove的區別mouseout與mouseleave的區別，mouseovermouseout
<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title><script src="script/jquery-1.11.0.min.js" type="text/javascript"></script> <script type="text/javascript"> //<!--不論滑鼠指標進入被選元素或其子項目，都會觸發 mouseover 事件--> $(function () { //-------mouseover 滑鼠進入 $("#div1").mouseover(function () { $("#btn1").val(parseInt($("#btn1").val()) + 1) }) //當滑鼠進入div1的時候會觸發mouseover事件，因為btn1和btn2是包裹在div1下的子項目，所以當滑鼠從div進入到子項目 btn1的時候又會觸發mouseover事件 ,當滑鼠從btn1進入到btn2的時候又會再次觸發mouseover事件，當滑鼠離開btn2元素本身 進入到div1的時候，又會觸發mouseover }) //--------------------------------------------------------------------------------------------------------- $(function () { //-------mousemove 滑鼠進入 $("#div2").mousemove(function () { $("#btn3").val(parseInt($("#btn3").val()) + 1) }) //<!--當滑鼠進入到div2的時候就會觸發mousemove事件，進入div2後【只要移動一個像素點】都會觸發mousemove事件 [請謹慎使用，耗資源]--> }); //--------------------------------------------------------------------------------------------------------- $(function () { //-------mouseenter 滑鼠進入 $("#div3").mouseenter(function () { $("#btn5").val(parseInt($("#btn5").val()) + 1) }) //<!--只有當滑鼠進入【被選中】控制項div3的時候才會觸發mouseenter事件，當滑鼠進入【被選中】控制項的【子項目】的時候而沒有離開被選中控制項本身的時候【不會再次】觸發--> }); //******************************************************************************************************** //<!--不論滑鼠指標離開被選元素還是任何子項目，都會觸發 mouseout 事件--> $(function () { //-------mouseout 滑鼠離開 $("#div4").mouseout(function () { $("#btn7").val(parseInt($("#btn7").val()) + 1) }) //當滑鼠離開的div4的時候就會觸發mouseout事件，當滑鼠進入div4的子控制項btn7後，離開btn7就會再次觸發mouseout事件，當滑鼠從btn7進入btn8,後，離開btn8的時候也會再次觸發mouseout事件。 }); //--------------------------------------------------------------------------------------------------------- $(function () { //-------mouseleave 滑鼠離開 $("#div5").mouseleave(function () { $("#btn9").val(parseInt($("#btn9").val()) + 1) }) //<!--只有當滑鼠離開【被選中】控制項的時候才會觸發mouseenter事件；當滑鼠離開【被選中】的【子項目】而【沒有離開被選中的控制項】的時候【不會再次】觸發--> }); //========================================================================================================== </script></head><body><p> 當滑鼠進入div1的時候會觸發mouseover事件，因為btn1和btn2是包裹在div1下的子項目，所以當滑鼠從div進入到子項目 btn1的時候又會觸發mouseover事件 ,當滑鼠從btn1進入到btn2的時候又會再次觸發mouseover事件，當滑鼠離開btn2元素本身 進入到div1的時候，又會觸發mouseover</p><div style=" border:10px solid red" id="div1"><input type="button" value="0" id="btn1" /><input type="button" value="btn2" id="btn2" style=" margin-left:40px"/></div><br/><br/><br/><hr/><p> 當滑鼠進入到div2的時候就會觸發mousemove事件，進入div2後【只要移動一個像素點】都會觸發mousemove事件 [請謹慎使用，耗資源]</p><div style=" border:10px solid red" id="div2"><input type="button" value="0" id="btn3" /><input type="button" value="btn4" id="btn4" style=" margin-left:40px"/></div><br/><br/><br/><hr/><hr/><p>只有當滑鼠進入【被選中】控制項div3的時候才會觸發mouseenter事件，當滑鼠進入【被選中】控制項的【子項目】的時候而沒有離開被選中控制項本身的時候【不會再次】觸發</p><div style=" border:10px solid red" id="div3"><input type="button" value="0" id="btn5" /><input type="button" value="btn6" id="btn6" style=" margin-left:40px"/></div><br/><br/><br/><hr/><p>當滑鼠離開的div4的時候就會觸發mouseout事件，當滑鼠進入div4的子控制項btn7後，離開btn7就會再次觸發mouseout事件，當滑鼠從btn7進入btn8,後，離開btn8的時候也會再次觸發mouseout事件。</p><div style=" border:10px solid red" id="div4"><input type="button" value="0" id="btn7" /><input type="button" value="btn8" id="btn8" style=" margin-left:40px"/></div><br/><br/><br/><hr/><p>只有當滑鼠離開【被選中】控制項的時候才會觸發mouseenter事件；當滑鼠離開【被選中】的【子項目】而【沒有離開被選中的控制項】的時候【不會再次】觸發</p><div style=" border:10px solid red" id="div5"><input type="button" value="0" id="btn9" /><input type="button" value="btn10" id="btn10" style=" margin-left:40px"/></div><br/><br/><br/></body></html>
這2個是有區別的。
hover是指分別當滑鼠指標進入和離開元素時被執行的事件相當於mouseenter+mouseleave。而mouseover滑鼠進入某個元素或其子項目時觸發。
可參考mouseover和mouseenter的區別：www.w3school.com.cn/...seover
而mousemove如你所說只要滑鼠移動，哪怕只有1像素就會觸發。因為使用者在瀏覽網頁的過程中，滑鼠是會不停移動的，所以一旦綁定這個事件，網頁就會不停的執行mousemove所綁定的響應函數，消耗系統資源。這裡的系統資源是指用戶端的。。
onmouseenter 與onmouseleave 是不是相當於onmouseover 與 onmouseout
基本的功能一樣，但是有兩個區別：
1、onmouseenter 和onmouseleave事件是不冒泡的
2、onmouseenter 和onmouseleave只有IE瀏覽器支援
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
