mouseenter和mouseover的区别

mouseover和mouseenter的区别

1. mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡过程。对应的移除事件是mouseout。

var father = document.querySelector('.father');
var son = document.querySelector('.son');

father.addEventListener('mouseover', function () {
    console.log('触发了');
})

因为mouseover会有冒泡过程，所以当经过father的时候会触发一次，经过son的时候由于冒泡到father也会再触发一次。

2. mouseenter：当鼠标移除元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡，对应的移除事件是mouseleave.

var father = document.querySelector('.father');
var son = document.querySelector('.son');

father.addEventListener('mouseenter', function () {
    console.log('触发了');
})

因为mouseenter不会冒泡，所以当经过father到son的时候，也只会触发一次事件。