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

深入理解DOM事件类型系列第一篇——鼠标事件
深入理解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事件
顺序
【1】鼠标移入时，触发mouseover、mouseenter和mousemove事件
IE浏览器会先触发一次mousemove事件，再触发mouseover 和mouseenter事件，再触发多次mousemove事件
而其他浏览器都是先触发mouseover和mouseenter事件，再触发多次mousemove事件
还原
【2】鼠标移出时，触发mousemove、mouseleave和mouseout事件
所有浏览器的顺序都是(1)mousemove、(2)mouseout和(3)mouseleave事件
还原
【3】双击鼠标时，触发mousedown、mouseup、click、dblclick事件
一般地，浏览器的顺序是(1)mousedown、(2)mouseup、(3)click、(4)mousedown、(5)mouseup、(6)click、(7)dblclick
但IE8-浏览器有一个小bug，在双击事件中，它会跳过第二个mousedown和click事件，顺序为(1)mousedown、(2)mouseup、(3)click、(4)mouseup、(5)dblclick
还原
【4】点击鼠标右键时，触发mousedown、mouseup、contextmenu事件
一般地，浏览器的顺序是(1)mousedown、(2)mouseup、(3)contextmenu
但safari浏览器有一个小bug，它不触发mouseup事件，顺序为(1)mousedown、(2)contextmenu
还原
【5】嵌套元素的移入移出时，触发mouseover、mouseenter、mouseleave、mouseout事件
从父级元素进入子级元素时，顺序为:(1)父级元素的mouseout、(2)子级元素的mouseover、(3)父级元素的mouseover、(4)子级元素的mouseenter
从子级元素进入父级元素时，顺序为:(1)子级元素的mouseout、(2)父级元素的mouseout、(3)子级元素的mouseleave、(4)父级元素的mouseover
还原
从上面的结果可以看出mouseover、mouseout和mouseleave 和mouseenter事件的区别
1、mouseover、mouseout是冒泡的，而mouseleave和mouseenter是不冒泡的
2、从父级元素进入子级元素时，不会触发父级元素的mouseleave事件
3、从子级元素进入父级元素时，不会触发父级元素的mouseenter事件
事件对象
鼠标事件对象提供了丰富的信息，接下来将按照功能分类介绍
坐标位置
关于坐标位置，事件对象提供了clientX/Y、pageX/Y、screenX/Y、x/y、offsetX/Y、layerX/Y这6对信息
clientX/Y与x/y
clientX/Y表示鼠标指针在可视区域中的水平和垂直坐标
x/y与clientX/Y相同，但有兼容问题。

firefox浏览器不支持x/y，且IE7-浏览器把视口的左上角坐标设置为(2,2)，其他浏览器则将(0,0)作为起点坐标，所以存在(2,2)的差距
screenX/Y
screenX/Y表示鼠标指针相对于屏幕的水平和垂直坐标
pageX/Y与layerX/Y
pageX/Y表示相对于页面的水平和垂直坐标，它与
clientX/clientY的区别是不随滚动条的位置变化layerX/Y与pageX/Y相同。