深入理解DOM事件类型系列第一篇——鼠标事件

鼠标事件是web开发中最常用的一类事件，毕竟鼠标是最主要的定位设备。本文将详细介绍鼠标事件的内容

类型

鼠标事件共10类，包括click、contextmenu、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter和mouseleave 

click         当用户按下并释放鼠标按键或其他方式“激活”元素时触发
contextmenu   可以取消的事件，当上下文菜单即将出现时触发。当前浏览器在鼠标右击时显示上下文菜单
dblclick      当用户双击鼠标时触发
mousedown     当用户按下鼠标按键时触发
mouseup       当用户释放鼠标按键时触发
mousemove     当用户移动鼠标时触发
mouseover     当鼠标进入元素时触发。relatedTarget(在IE中是fromElement)指的是鼠标来自的元素
mouseout      当鼠标离开元素时触发。relatedTarget(在IE中是toElement)指的是鼠标要去往的元素
mouseenter    类似mouseover，但不冒泡。IE将其引入，HTML5将其标准化，但尚未广泛实现
mouseleave    类似mouseout，但不冒泡。IE将其引入，HTML5将其标准化，但尚未广泛实现

冒泡

页面上的所有元素都支持鼠标事件，除了mouseenter和mouseleave事件外，所有的鼠标事件都会冒泡

[注意]safari浏览器不支持mouseenter和mouseleave事件 

<button id="test" style="height: 30px;width: 200px;"></button>
<script>
//鼠标移入移出按钮时，显示false，表示不冒泡
test.onmouseenter = test.onmouseleave =function(e){
    test.innerHTML += e.bubbles;//false
</script>