- What they have in common: when the mouse passes over an element, an event will be triggered.
- The difference: mouseenter will not bubble.
So when mouseover is used, the mouse over the box itself will trigger, and the mouse over the child box will also trigger (because of bubbling). When using mouseenter, it will only be triggered when passing through the box itself.
Code test:
Bind the mouseover event and mouseenter event to the parent element respectively.
<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>
The effect is as follows:
In contrast, there are mouseout and mouseleave events . Similarly, mouseleave will not bubble.