- 共通点:マウスが要素の上を通過すると、イベントがトリガーされます。
- 違い: mouseenter はバブルしません。
したがって、マウスオーバーを使用すると、ボックス自体の上にマウスを置くとトリガーされ、子ボックスの上にマウスを置くとトリガーされます (バブリングのため)。mouseenter を使用すると、ボックス自体を通過するときにのみトリガーされます。
コード テスト:
mouseover イベントと mouseenter イベントをそれぞれ親要素にバインドします。
<style>
.father {
width: 300px;
height: 300px;
background-color: pink;
margin: 10px auto;
}
.son {
width: 200px;
height: 200px;
background-color: skyblue;
}
</style>
<body>
<div class="father">
father
<div class="son">son</div>
</div>
<script>
var father = document.querySelector('.father');
var son = document.querySelector('.son');
father.addEventListener('mouseover', function () {
console.log(11);
})
father.addEventListener('mouseenter', function () {
console.log(22);
})
</script>
</body>
効果は次のとおりです。
対照的に、 mouseout と mouseleaveイベントがあります. 同様に、mouseleave はバブルしません。