mouseover與mouseenter、mouseout與mouseleave
阿新 • • 發佈：2019-01-09
mouseenter 和 mouseleave 不支援冒泡
mouseover 和 mouseout 支援冒泡
mouseover與mouseenter
不論滑鼠指標穿過被選元素或其子元素，都會觸發 mouseover 事件。
只有在滑鼠指標從元素外穿入被選元素（到元素內）時，才會觸發 mouseenter 事件。
mouseout與mouseleave
不論滑鼠指標離開被選元素還是任何子元素，都會觸發 mouseout 事件。
只有在滑鼠指標從元素內穿出被選元素（到元素外）時，才會觸發 mouseleave 事件。
mouseover和mouseout 事件包含有event 物件的relatedTarget 屬性的值
<!DOCTYPE html>
<html>
<head>
<title>Related Elements Example</title>
</head>
<body>
<div id="myDiv" style="background-color:red;height:100px;width:100px;"></div>
</body>
</html>
這個例子會在頁面上顯示一個<div>元素。如果滑鼠指標一開始位於這個<div>元素上，然後移出了這個元素，那麼就會在<div>
<body>元素。與此同時，<body>元素上面會觸發mouseover 事件，而相關元素變成了<div>。
DOM通過event 物件的relatedTarget 屬性提供了相關元素的資訊。這個屬性只對於mouseover和mouseout 事件才包含值；對於其他事件，這個屬性的值是null。IE8及之前版本不支援relatedTarget屬性，但提供了儲存著同樣資訊的不同屬性。在mouseover 事件觸發時，IE 的fromElement 屬性中儲存了相關元素；在mouseout 事件觸發時，IE 的toElement 屬性中儲存著相關元素。（IE9 支援所有這些屬性。）