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 事件中，关于表单元素获取/丢失焦点，有四个相关的事件：
focusblurfocusinfocusout
当表单元素获取焦点后，会触发 focus 和 focusin 事件，当表单元素失去焦点后，会触发 blur 和 focusout 事件，其中 focusin 和 focusout 事件跟 focus 和 blur 事件的区别是：focusin 和 focusout 事件会冒泡（即表单元素的父节点可以绑定这两个事件，在获取/失去焦点后，会触发父节点上的相关事件处理函数），而 focus 和 blur 事件不会冒泡，将这两个事件绑定到父节点时不会有任何效果。
完。
网友评论