mouseover 和 mouseenter
mouseover
经过自身盒子触发,经过子盒子也触发。
【mouseover会冒泡,鼠标从外部移入子元素或从父元素移入子元素,都会先触发子元素的mouseover再触发父元素的mouseover。】
mouseenter
只经过自身盒子触发,不冒泡。
mouseout 和 mouseleave
mouseout
: 离开自身盒子触发自身的mouseout,进入子盒子也触发自身的mouseout。
【 mouseout冒泡,从子元素进入父元素时,即触发子元素的mouseout,也会触发父元素的mouseout。】
mouseleave
:仅在自身盒子时被触发,不冒泡。
示例1
结论:对于同一个元素,鼠标移入后,会先触发mouseover,再触发mouseenter。
<style>
#parent {
width: 200px;
height: 200px;
background-color: bisque;
}
</style>
<div id="parent"></div>
<script>
var parent = document.getElementById("parent");
parent.addEventListener("mouseenter", function (e) {
console.log("===mouseenter parent===");
});
parent.addEventListener("mouseover", function (e) {
console.log("===mouseover parent===");
}