事件类型—鼠标事件
目录
一、事件分类
二、事件顺序
三、事件对象
坐标属性
修改键属性
relatedTarget属性
四、事件应用
一、事件分类
鼠标事件共有11种类型，分别是click、contextmenu、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave和onmousewheel。
click事件
鼠标左键单击事件。鼠标在事件侦听器绑定元素的内部单击左键时触发。该事件支持冒泡和捕获。
contextmenu事件
鼠标右键单击事件。鼠标在事件侦听器绑定元素的内部单击右键时触发。右键点击网页时，默认弹出右键菜单，通常使用该事件来禁用右键菜单。该事件支持冒泡和捕获。
dblclick事件
鼠标左键双击事件。鼠标在事件侦听器绑定元素的内部双击左键时触发。该事件支持冒泡和捕获。
mousedown事件
鼠标在事件侦听器绑定元素的内部按下左键或右键时触发（键不需要释放）。该事件支持冒泡和捕获。
mouseup
鼠标在事件侦听器绑定元素的内部松开左键或右键时触发。该事件支持冒泡和捕获。
mousemove
鼠标在事件侦听器绑定元素的内部移动时触发。该事件支持冒泡和捕获。
mouseover
鼠标进入事件侦听器绑定元素的内部时触发。该事件支持冒泡和捕获。鼠标进入或离开子元素时也会触发该事件。
mouseout
鼠标离开事件侦听器的绑定元素时触发。该事件支持冒泡和捕获。鼠标进入或离开子元素时也会触发该事件。
mouseenter
该事件与mouseover事件作用相同，区别是该事件不支持冒泡。safari浏览器不支持mouseenter事件。鼠标经过子元素时不会触发该事件。
mouseleave
该事件与mouseout事件作用相同，区别是该事件不支持冒泡。safari浏览器不支持mouseleave事件。鼠标经过子元素时不会触发该事件。
onmousewheel事件
滚轮事件。该事件的侦听器可以绑定在任意元素上，鼠标位于事件侦听器绑定元素的内部且滑动滚轮时触发。该事件有一个wheelDelta属性，向前滑动滚轮时，属性值是120的倍数，向后滑动滚轮时，属性值是-120的倍数。
火狐浏览器不支持mousewheel事件，使用DOMMouseScroll事件代替。该事件有一个detail属性，向前滑动滚轮时，属性值是-3的倍数，向后滑动滚轮时，属性值是3的倍数。该事件侦听器只能用addEventListener绑定。
二、事件顺序
鼠标移入事件侦听器的绑定元素
共触发三个鼠标事件，其一mouseover，其二mouseenter，其三mousemove。不同浏览器中事件的触发行为表现不同，ie浏览器中，先触发一次mousemove，再依次触发mouseover和mouseenter，最后连续触发mousemove。其他浏览器中，先依次触发mouseover和mouseenter，再连续触发mousemove。
鼠标移出事件侦听器的绑定元素
共触发三个鼠标事件，按触发顺序依次是mousemove、mouseout和mouseleave。
双击事件侦听器绑定的元素
共触发四个鼠标事件，分别是mousedown、mouseup、click和dblclick。
单击鼠标右键
共触发三个鼠标事件，按触发顺序依次为mousedown、mouseup和contextmenu。
单击鼠标左键
共触发三个鼠标事件，按触发顺序依次为mousedown、mouseup和click。
鼠标在嵌套元素间移入移出
共触发四个鼠标事件，分别是mouseover、mouseenter、mouseleave和mouseout。
三、事件对象
坐标属性
事件对象中涉及坐标位置的属性共有6对，分别是clientX/Y、x/y、pageX/Y、screenX/Y、offsetX/Y和layerX/Y。
clientX和clientY
返回鼠标在可视区域内的水平和垂直坐标。ie7及以下版本的浏览器中将视口左上角坐标设置为（2，2），其它浏览器为（0，0）。x/y与clientX/clientY作用相同（firefox浏览器不支持x和y属性）。
screenX/screenY
返回鼠标相对于屏幕的水平和垂直坐标。
pageX/pageY
返回鼠标相对于页面的水平和垂直坐标，属性值不随滚动条的位置变化。layerX/Y与pageX/Y作用相同。ie8及以下版本的浏览器不支持pageX/Y和layerX/Y。
//兼容写法
handle = function(e){e = e || event;if(e.pageX == undefined){e.pageX = e.clientX + document.documentElement.scrollLefte.pageY = e.clientY + document.documentElement.scrollTop }
}offsetX/offsetY
返回鼠标相对于定位父级的水平和垂直坐标。无定位父级时，返回相对于body的水平和垂直坐标。
修改键属性
键盘上修改键的状态可以影响鼠标事件。修改键有四个，分别是Shift、Ctrl、Alt和Windows键。每个修改键在事件对象中都有一个对应属性来表示它们的修改状态，分别是shiftKey、ctrlKey、altKey和metaKey属性，这些属性值都是布尔类型，修改键被按下时对应属性值为true，否则为false。ie8及以下版本的浏览器不支持metaKey属性。可以利用修改键属性实现组合键状态+鼠标触发多重判断。
relatedTarget属性
返回事件的次要相关节点，没有次要相关节点则返回null。target属性返回实际触发事件的元素。ie8及以下版本的浏览器不支持target和relatedTarget属性，target可以用srcElement属性代替，relatedTarget属性可以用toElement属性代替（firefox浏览器不支持srcElement和toElement属性）。
//兼容写法
div.onmouseover = function(e){e = e || event;console.log("target: " + (e.target||e.srcElement));console.log("relatedTarget: " + (e.relatedTarget||e.toElement));
}button属性
返回事件对象的按键信息，返回结果是一个数值，表示按下了哪个鼠标键。若不阻止右键默认行为，safari浏览器无法表示按下右键。
没有按键 -1
按下左键 0
按下滚轮 1
按下右键 2
ie8及以下版本的浏览器中事件对象的button属性值与标准button属性值有很大差异，如下所示。
0: 没有按键
1: 按下左键
2: 按下右键
3: 同时按下左右键
4: 按下滚轮
5: 同时按下左键和滚轮
6: 同时按下右键和滚轮
7: 同时按下左键、右键和滚轮//ie8及以下版本的浏览器返回false, 其他浏览器true
var hasMouse = document.implementation.hasFeature('MouseEvents','2.0');
console.log(hasMouse);
四、事件应用
拖拽小方块
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！