鼠标事件的一些随笔记录

onmouseenter - onmouseleave与onmouseover - onmouseout的区别

onmouseenter - onmouseleave不支持冒泡，而onmouseover - onmouseout支持冒泡。即当父div完全包裹着子div，当我们鼠标移入子div范围内或者移出时，若使用的是onmouseenter - onmouseleave，则不会触发父div对应绑定的函数。相反onmouseover - onmouseout会触发父div对应绑定的函数。

onmouseenter - onmouseleave

 

当鼠标从左到右划过div时：

 可以看到父div和子div的mouseenter - mouseleave都只执行了一遍。

onmouseover - onmouseout

 

当鼠标从左到右划过div时：

 可以看到，鼠标在移入子div时，被视作为移出了父div。并且在移入子div之后，由于具有冒泡属性，在父div中又一次执行了movein()。同样，在随后移出子div时，在父div中执行了一次moveout()。