JavaScript中onmouseenter、onmouseleave和onmouseover、onmouseout的区别

鼠标事件在工作中经常会用到，对于刚入门前端的学童有些人对onmouseenter、onmouseleave和onmouseover、onmouseout的使用会有疑惑，两者有什么区别呢，我们通过下面两个实例来分析。

 

实例1：只有一个元素，没有子元素

实例2：如果鼠标从上到下经过全部dom元素

结果统计：
实例1中【onmouseenter、onmouseleave】、【onmouseover、onmouseout】事件各触发1次事件处理程序。
实例2中【onmouseenter、onmouseleave】事件触发1次事件处理程序，【onmouseover、onmouseout】事件会触发10次事件处理程序。

得出结论：
如果父元素中没有子元素，【onmouseenter、onmouseleave】事件和【onmouseover、onmouseout】事件都只会触发一次事件处理程序；
如果父元素中含有子元素 【onmouseenter、onmouseleave】事件仍旧只会触发一次对应的事件处理程序，【onmouseover、onmouseout】事件会触发多次（触发次数和鼠标经过的子元素个数有关）事件处理程序。

总结：

onmouseover、onmouseout：鼠标经过时自身会触发事件，经过其子元素时也会触发该事件;

onmouseenter、onmouseleave：鼠标经过时自身触发事件，经过其子元素时不会触发该事件;

注意：这四个事件要两两配对使用，不能混合使用