1、onmouseover、onmouseout：鼠标经过时自身触发事件，经过其子元素时也触发该事件；（父亲有的东西，儿子也有）
2、onmouseenter、onmouseleave：鼠标经过时自身触发事件，经过其子元素时不触发该事件。（父亲的东西就是父亲的，不归儿子所有）
这四个事件两两配对使用，onmouseover、onmouseout一对，onmouseenter、onmouseleave一对，不能混合使用。
下面来看例子:
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>*{ margin: 0; padding: 0; } .f{ position: relative; width: 200px; height: 200px; background-color: #56b829; } .son{ width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; background-color: red; }</style></head><body><divclass="f"><divclass="son"></div></div><script>let f=document.getElementsByClassName('f')[0]; f.onmouseover=function (e) { console.log('in',e.target); } f.onmouseout=function (e) { console.log('out',e.target); }</script></body></html>
我们先看下图再分析
1.gif
我们首先进入最外面的div，可以看到是父div触发了mouseover事件，接着进入子div，可以看到父div触发了mouseout事件，子div接着触发mouseover事件，然后我们从子div里面出来，可以看到子div触发了mouseout事件，父div触发了mouseover事件，接着我们移出鼠标，父div触发mouseout事件.如果不想子div去触发事件，则可以使用onmouseenter、onmouseleave。
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>*{ margin: 0; padding: 0; } .f{ position: relative; width: 200px; height: 200px; background-color: #56b829; } .son{ width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; background-color: red; }</style></head><body><divclass="f"><divclass="son"></div></div><script>let f=document.getElementsByClassName('f')[0]; f.onmouseenter=function (e) { console.log('in',e.target); } f.onmouseleave=function (e) { console.log('out',e.target); }</script></body></html>
效果如下图
2.gif
