久草片在线中文,亚洲伊人免费视,亚洲精品伊人久久

第1章事件介紹
視頻：1-1 jQuery基礎(三)—事件篇...(01:41)

jQuery鼠標事件之mouseenter與mouseleave事件

用交互操作中，經常需要知道用戶操作鼠標是否有移到元素內部或是元素外部，因此jQuery提供了一個mouseenter和mouseleave的快捷方法可以監聽用戶移動到內部的操作

使用上非常簡單，三種參數傳遞方式與mouseover和mouseout是一模一樣的，所以這里不再重復，主要講講區別，下面以mouseenter為例：

mouseenter JavaScript事件是Internet Explorer專有的。由于該事件在平時很有用，jQuery的模擬這一事件，以便它可用于所有瀏覽器。該事件在鼠標移入到元素上時被觸發。任何HTML元素都可以接受此事件。

mouseenter事件和mouseover的區別

關鍵點就是：冒泡的方式處理問題

簡單的例子：

mouseover為例：

<div class="aaron2">
    <p>鼠標離開此區域觸發mouseleave事件</p>
</div>

如果在p元素與div元素都綁定mouseover事件，鼠標在離開p元素，但是沒有離開div元素的時候，觸發的結果:

p元素響應事件
div元素響應事件

這里的問題是div為什么會被觸發？原因就是事件冒泡的問題，p元素觸發了mouseover，他會一直往上找父元素上的mouseover事件，如果父元素有mouseover事件就會被觸發

所以在這種情況下面，jQuery推薦我們使用 mouseenter事件

mouseenter事件只會在綁定它的元素上被調用，而不會在后代節點上被觸發

這就是最本質的區別，具體的對應可以參考右邊的案例：

PS：同學可以根據右側代碼，自己寫出mouseout與mouseleave的區別哦~

任務

?不會了怎么辦

index.html

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style> .left div, .right div { width: 350px; height: 150px; padding: 5px; margin: 5px; border: 1px solid #ccc; } p{ height: 50px; border: 1px solid red; margin: 30px; } .left div { background: #bbffaa; } .right div { background: yellow; } </style> <script src="http://www.xianlaiwan.cn/static/lib/jquery/1.9.1/jquery.js"></script> </head> <body> <h2>.mouseover()方法</h2> <div class="left"> <div class="aaron1"> <p>鼠標離開此區域觸發mouseover事件</p> <a>mouseover事件觸發次數：</a><br/> <a>mouseover冒泡事件觸發次數：</a> </div> </div> <h2>.mouseenter()方法</h2> <div class="right"> <div class="aaron2"> <p>鼠標進入此區域觸發mouseenter事件</p> <a>mouseenter事件觸發次數：</a><br/> <a>mouseenter冒泡事件觸發次數：</a> </div> </div> <br/> <script type="text/javascript"> var i = 0; $(".aaron1 p").mouseover(function(e) { $(".aaron1 a:first").html('mouseover事件觸發次數：' + (++i)) }) var n = 0; $(".aaron1").mouseover(function() { $(".aaron1 a:last").html('mouseover冒泡事件觸發次數：' + (++n)) }) </script> <script type="text/javascript"> var i = 0; $(".aaron2 p").mouseenter(function(e) { $(".aaron2 a:first").html('mouseenter事件觸發次數：' + (++i)) }) var n = 0; $(".aaron2").mouseenter(function() { $(".aaron2 a:last").html('mouseenter冒泡事件觸發次數：' + (++n)) }) </script> </body> </html>

提問題

提交

其他問答

查看更多本節問答

寫筆記

公開筆記

提交

全屏

請驗證，完成請求

由于請求次數過多，請先驗證，完成再次請求

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

2-5 jQuery鼠標事件之mouseenter與mouse...

jQuery鼠標事件之mouseenter與mouseleave事件

任務

提問題

其他問答

寫筆記

您還未綁定服務號

收藏課程后，能更快找到我哦～

手記推薦

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

2-5 jQuery鼠標事件之mouseenter與mouse...

熱搜

最近搜索清空

jQuery鼠標事件之mouseenter與mouseleave事件

任務

提問題

其他問答

寫筆記

您還未綁定服務號

收藏課程后，能更快找到我哦～

手記推薦

收藏課程后，能更快找到我哦～