JS事件之onmouseover 、onmouseout 与onmouseenter 、onmouseleave

1、onmouseover、onmouseout：鼠标经过时自身触发事件，经过其子元素时也触发该事件；（父亲有的东西，儿子也有）
2、onmouseenter、onmouseleave：鼠标经过时自身触发事件，经过其子元素时不触发该事件。（父亲的东西就是父亲的，不归儿子所有）
这四个事件两两配对使用，onmouseover、onmouseout一对，onmouseenter、onmouseleave一对，不能混合使用。
下面来看例子:

我们先看下图再分析

1.gif

我们首先进入最外面的div，可以看到是父div触发了mouseover事件，接着进入子div，可以看到父div触发了mouseout事件，子div接着触发mouseover事件，然后我们从子div里面出来，可以看到子div触发了mouseout事件，父div触发了mouseover事件，接着我们移出鼠标，父div触发mouseout事件.如果不想子div去触发事件，则可以使用onmouseenter、onmouseleave。

效果如下图

2.gif