【javascript基础】mouseover和mouseenter mouseout和mouseleave的区别

mouseenter() 方法 只有在鼠标指针经过被选元素时(不包括鼠标指针经过任何子元素)，才会触发 mouseenter 事件。

mouseover ()方法在鼠标指针经过被选元素或者经过任何子元素时，都会触发 mouseover 事件。

不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。

只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

 

 demo :

<div id="wrap" style="padding:50px;background:red;">
    <div id="inner" style="padding:50px;background:black;color:white;">444444444444</div>
</div>

<script type="text/javascript">

function $(str){
    return document.getElementById(str);
}

$("wrap").addEventListener("mouseenter", function(){
    console.log("mouseenter");
}, false);


$("wrap").addEventListener("mouseover", function(){
    console.log("mouseover");
}, false);

</script>