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 支援所有這些屬性。)