javascript核心技术（二十四）事件类型（三）onmouseover onmouseout

人亦已歌 · 发表于 2023-1-24 19:47:04

在工作中，常常会分不清mouseente和mouseover，mouseleave和mouseout的区别，这里我们特别说明如下：

mouseover是鼠标移入事件，与mouseente的区别是：mouseover鼠标从父元素移入到子元素上时也会触发
mouseout是鼠标离开事件，与mouseleave的区别是：mouseout鼠标从子元素移出到父元素上时也会触发
将mouseover和mouseout绑定到父元素上时，当鼠标移入或移出父元素时触发，当鼠标在父元素和子元素之间移动时也会触发。

复制代码

请看以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="d" style="width:200px;height:200px;border:1px solid red">
    父元素
    <div id="inner" style="width:100px;height:100px;border:1px solid gray">
    子元素
    </div>
</div>
<script type="text/javascript">
    var d = document.getElementById('d');//获取父元素

    // mouseover和mouseout区分父子元素，在父子之间移入移出会触发
    d.onmouseover = function(){
        console.log('enter');
    }
    d.onmouseout = function(){
        console.log('leave');
    }
</script>
</body>
</html>

javascript核心技术（二十四）事件类型（三）onmouseover onmouseout

以上，我们给父元素绑定了onmouseover和onmouseout事件。
实验的结果是：
当鼠标移入父元素时会触发onmouseover事件，从父元素移入子元素时先触发onmouseout再触发onmouseover事件。
当鼠标从子元素移入到父元素时，先触发onmouseout事件，再触发onmouseover事件。
当鼠标从父元素移出时触发onmouseout事件。
javascript核心技术（二十四）事件类型（三）onmouseover onmouseout