[记录]mouseover/mouseenter 以及 mouseout/mouseleave 的区别

mouseover 和 mouseenter 事件都是在鼠标移入元素时触发。
mouseout 和 mouseleave 事件，都是鼠标移出元素时触发。

不同点在于：mouseover 和 mouseout 事件会冒泡，而 mouseenter 和 mouseleave 事件不会冒泡。

下面是一个例子：
1.HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            padding:20px;
            background: red;
        }
        #inner{
            background: orange;
        }
    </style>
</head>
<body>
    <div id="outer">
        Outer
        <div id="inner">Inner</div>
    </div>
</body>
</html>

2.处理 mouseover 和 mouseout 事件：

<script>
    const outerEle = document.querySelector("#outer")
    const innerEle = document.querySelector("#inner")
    outerEle.addEventListener("mouseover",() => {
        console.log("Mouseover:outerEle")
    })
    innerEle.addEventListener("mouseover",() => {
        console.log("Mouseover:innerEle")
    })
</script>

将鼠标移入到 #inner 元素，查看运行结果：

// 移入到 #outer 元素
Mouseover:outerEle
// 移入到 #inner 元素
Mouseover:innerEle
// 移入到 #inner 元素上时，冒泡到 #outer 元素
Mouseover:outerEle

3.处理 mouseenter 和 mouseleave 事件
将代码修改下，处理 mouseenter 和 mouseleave 事件：

<script>
    const outerEle = document.querySelector("#outer")
    const innerEle = document.querySelector("#inner")
    outerEle.addEventListener("mouseenter",() => {
        console.log("Mouseenter:outerEle")
    })
    innerEle.addEventListener("mouseenter",() => {
        console.log("Mouseenter:innerEle")
    })
</script>

运行结果：

// 移入到 #outer
Mouseenter:outerEle
// 移入到 #inner，事件并未冒泡到 #outer
Mouseenter:innerEle

可见 mouseenter 和 mouseleave 是为了方便在鼠标移入/移出元素时的冒泡处理，如果在 mouseover 和 mouseout 中阻止冒泡，就能达到和 mouseenter 和 mouseleave 一样的效果：

<script>
    const outerEle = document.querySelector("#outer")
    const innerEle = document.querySelector("#inner")
    outerEle.addEventListener("mouseover",() => {
        console.log("Mouseover:outerEle")
    })
    innerEle.addEventListener("mouseover",(e) => {
        e.stopPropagation()
        console.log("Mouseover:innerEle")
    })
</script>

执行结果略。

注：在 DOM 事件中，关于表单元素获取/丢失焦点，有四个相关的事件：

focus
blur
focusin
focusout

当表单元素获取焦点后，会触发 focus 和 focusin 事件，当表单元素失去焦点后，会触发 blur 和 focusout 事件，其中 focusin 和 focusout 事件跟 focus 和 blur 事件的区别是：focusin 和 focusout 事件会冒泡（即表单元素的父节点可以绑定这两个事件，在获取/失去焦点后，会触发父节点上的相关事件处理函数），而 focus 和 blur 事件不会冒泡，将这两个事件绑定到父节点时不会有任何效果。

完。

[记录]mouseover/mouseenter 以及 mouseout/mouseleave 的区别

推荐阅读更多精彩内容