- mouseleave 在指针离开元素时被触发，不冒泡；
- mouseout 在指针离开元素或进入该元素的子元素时均会被触发，冒泡；
大部分需求使用 mouseleave，下面是演示代码：
<!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>
<style>
.container {
width: 200px;
height: 200px;
border: 1px solid red;
margin: 50px;
}
.box {
width: 60px;
height: 60px;
border: 1px solid black;
margin: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
<script>
var container = document.querySelector(".container")
var box = document.querySelector(".box")
// Event.currentTarget 标识是当事件沿着 DOM 触发时事件的当前目标。它总是指向事件绑定的元素；
// Event.target 则是事件触发的元素
// 存在二者的原因：Event.currentTarget 和 Event.target 可能是同一个元素的引用，也可能不是。不是的时候，说明是冒泡或捕获而触发
// 你学会了吗?
container.addEventListener('mouseleave', function (e) {
console.log("mouseleave", e.target, e.currentTarget, e)
console.log('----------------')
})
container.addEventListener('mouseout', function (e) {
console.log("mouseout", e.target, e.currentTarget, e)
console.log('----------------')
})
</script>
</html>
FpmHjXMNdX.gif
另外很重要的知识点：
- Event.currentTarget 标识是当事件沿着 DOM 触发时事件的当前目标。它总是指向事件绑定的元素；
- Event.target 则是事件触发的元素；
- 存在二者的原因：Event.currentTarget 和 Event.target 可能是同一个元素的引用，也可能不是。不是的时候，说明是冒泡或捕获而触发；
网友评论