jQuery中滑鼠事件和焦點事件的細節區分
阿新 • • 發佈：2021-12-09
滑鼠事件的細節
當滑鼠指標位於元素上方時，會發生 mouseover、mouseenter事件。
當滑鼠離開元素時，會發生mouseleave、mouseout事件
但是他們的區別又是什麼？
我們看一個例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
div{
width: 100px;
height: 100px;
background: #c40000;
}
#enter{
width: 200px;
height: 200px;
background: #007aff;
}
#over{
width: 200px;
height: 200px;
background: lightsalmon;
}
</style>
</head>
<body>
<div id="enter">
<div></div>
</div>
<div id="over">
<div></div>
</div>
</body>
</html>
<script>
$("#enter").mouseenter(function () {
console.log("enter我被進入啦")
})
$("#over").mouseover(function () {
console.log("over我被進入啦")
})
$("#enter").mouseleave(function () {
console.log("leave我出去啦")
})
$("#over").mouseout(function () {
console.log("out我出去啦")
})
</script>
當我把滑鼠先放到父元素大的div上面，然後再移動到小的div子元素上面，之後先離開子元素，然後離開父元素，看看會輸出什麼：
我們可以看到enter進入父元素，然後再進入子元素總共輸出一次，離開時也是輸出leave一次，而over進入父元素時輸出進入父元素一次，之後進入子元素時，會輸出out表示離開父元素，然後輸出over表示進入子元素，離開子元素時會輸出out表示離開子元素，之後輸出over表示進入父元素，最後離開父元素時會輸出out表示離開父元素。
因此我總結是：mouseover，mouseleave在父元素設定的時候<b>會</b>冒泡到子元素mouseenter，mouseout在父元素設定的時候<b>不會</b>冒泡到子元素
焦點的細節事件
當元素獲得焦點時，觸發 focusin事件和focus事件。focusin事件跟focus事件區別在於，他可以在父元素上檢測子元素獲取焦點的情況。
但是他們的區別又是什麼？我們再來看一個例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <style> div{ width: 100px; height: 100px; background: #c40000; } </style> </head> <body> <div id="one"> <input type="text" > </div> <div id="two"> <input type="text" > </div> </body> </html> <script> $("#one").focusin(function() { console.log("focusin我獲得焦點啦") }); $("#two").focus(function() { console.log("focus我獲得焦點啦") }); $("#one").focusout(function() { console.log("focusin失去焦點啦") }); $("#two").blur(function() { console.log("focus失去焦點啦") }); </script>
上面的程式碼說的是我們分別給input的父元素分別繫結focusin和focus兩個獲得焦點的事件，focusout、blur失去焦點的事件，我們來看一下他們的輸出情況：
我分別對兩個輸入框點選，以此獲得焦點，但是會發現只有focusin，focusout這兩個輸出了內容，而focus,blur卻沒有輸出任何內容。（注意：我是給輸入框的父元素紅色的div繫結的方法）
由此我可以總結到：
focusin，focusout給父元素繫結<b>會</b>監測子元素焦點的獲得情況，focus,blur給給父元素繫結<b>不會</b>監測子元素焦點的獲得情況