06-鼠标事件对象

鼠标事件对象

触发鼠标事件对象的事件

事件的触发顺序：mousedown > mouseup > click > dblclick

wheel事件触发的是WheelEvent，其他都是触发的是MouseEvent

事件名	描述
mousedown	鼠标按下
mouseup	鼠标弹起
click	单击事件
dblclick	双击事件
mousemove	鼠标在元素内部移动
mouseenter	鼠标移入，只会触发一次
mouseleave	鼠标移出，只会触发一次
mouseover	鼠标移入，移入子元素也会触发，会触发多次，适合事件委派
mouseout	鼠标移出，移入子元素也会触发，会触发多次，适合事件委派
contextmenu	鼠标右键
wheel	鼠标滚轮

MouseEvent接口

MouseEvent接口继承UIEvent接口

构造方法

• 通常使用事件的构造函数是用来做EventTarget.dispatchEvent(event)方法的参数来手动触发事件的
• 该构造函数接收两个参数，第一个参数是字符串形式的事件名称，第二个参数是一个可省略的配置对象，配置如下：这些配置也是实例对象的部分属性

配置项	描述
screenX	鼠标相对于屏幕的水平位置，默认值为0
screenY	鼠标相对于屏幕的垂直位置，默认值为0
clientX	鼠标相对于程序窗口的水平位置，默认值为0
clientY	鼠标相对于程序窗口的垂直位置，默认值为0
button	0=鼠标左键，1=鼠标中键，2=鼠标右键；默认为0
buttons	同时按下了那个键，由三个比特位表示：001=鼠标左键，010=鼠标右键，100=鼠标中键；默认为000
relatedTarget	事件的次要目标，比如鼠标移入移出时代表从哪个节点移入或移除的，默认为null
ctrlKey	是否同时按下了Ctrl键，默认为false
shiftKey	是否同时按下了Shift键，默认为false
altKey	是否同时按下了Alt键，默认为false
metaKey	是否同时按下了win或mac键，默认为false

实例属性

属性名	描述
MouseEvent.movementX	鼠标mousemove事件之间移动的水平相对距离
MouseEvent.movementY	鼠标mousemove事件之间移动的垂直相对距离
MouseEvent.offsetX	鼠标与目标节点左侧padding的水平距离
MouseEvent.offsetY	鼠标与目标节点上侧padding的垂直距离

实例方法

方法名	描述
MouseEvent.getModifierState(keysTar)	判断点击时是否按下了键盘上的某个键，该参数要查表

WheelEvent接口

WheelEvent接口继承MouseEvent接口

构造方法

• 通常使用事件的构造函数是用来做EventTarget.dispatchEvent(event)方法的参数来手动触发事件的
• 该构造函数接收两个参数，第一个参数是字符串形式的事件名称，第二个参数是一个可省略的配置对象，配置如下：这些配置也是实例对象的属性

配置项	描述
deltaX	滚轮的水平滚动量，默认是0.0
deltaY	滚轮的垂直滚动量，默认是0.0
deltaZ	滚轮的Z轴滚动量，默认是0.0
deltaMode	上面三个属性滚动量单位；0=像素，1=行，2=页；默认是0.0