事件-UIEvent

UIEvent 接口表示简单的用户界面事件。

UIEvent 是从 Event 派生出来的。尽管 UIEvent.initUIEvent() (en-US) 方法为了向后兼容而一直保留着，但是你应该使用 UIEvent() 构造器来创建 UIEvent 对象。

某些接口是这个的直接或间接后代：MouseEvent, TouchEvent, FocusEvent, KeyboardEvent, WheelEvent, InputEvent, 和CompositionEvent.

用户界面事件 UIEvent

用户界面事件或 UI 事件不一定跟用户操作有关。这类事件在 DOM 规范出现之前就已经以某种形式存在了，保留它们是为了向后兼容。 UI 事件主要有以下几种。

• load
• unload
• abort
• error
• select
• resize
• scroll

鼠标事件 MouseEvent

点击事件触发顺序：mousedown-->mouseup-->click-->dbclick

鼠标事件指与鼠标相关的事件，继承了 MouseEvent 接口。具体的事件主要有以下这些

鼠标事件
click	点击鼠标时
dbclick	双击鼠标时
mousedown	按下鼠标时
mouseup	释放按下的鼠标时
mousemove	在节点内部移动时，会连续触发
mouseover	进入一个节点时触发，会捕获，会在子节点触发
mouseout	离开一个节点时触发，会冒泡，会在父节点触发
mouseenter	进入一个节点时触发，不会捕获
mouseleave	离开一个节点时触发，不会冒泡
contextmenu	右击鼠标，或者按下”上下文菜单键“时
whell	滚动滚轮，继承自 whellEvent 接口

MouseEvent 接口的实例属性
MouseEvent.altKey	返回一个布尔值，表示 Alt 键是否被按下
MouseEvent.ctrlKey	同理，Ctrl 键
MouseEvent.metaKey	同理，Meta 键，Max 是一个四瓣小花，Windows 是 Win 键
MouseEvent.shiftKey	同理，Shift 键
MouseEvent.button	返回一个数值，表示按下了鼠标的那个键（0，1，2）
MouseEvent.button	返回一个三比特的二进制数值，表示同时按下的键

坐标相关属性
MouseEvent.screenX	返回鼠位置标相对于电脑屏幕左上角的水平坐标，只读
MouseEvent.screenY	返回鼠标位置相对于电脑屏幕左上角的垂直坐标，只读
MouseEvent.clientX	返回鼠标位置相对于浏览器窗口左上角的水平坐标，只读
MouseEvent.clientY	返回鼠标位置相对于浏览器窗口左上角的垂直坐标，只读
MouseEvent.pageX	返回鼠标位置与文档左侧边缘的水平距离，只读
MouseEvent.pageY	返回鼠标位置与文档上测边缘的垂直距离，只读
MouseEvent.offsetX	返回鼠标位置与目标节点左侧边缘的水平距离，只读
MouseEvent.offsetY	返回鼠标位置与目标节点上方边缘的垂直距离，只读
MouseEvent.movementX	返回当前位置与上一个事件位置之间的水平距离，只读
MouseEvent.movementY	返回当前位置与上一个事件位置之间的垂直距离，只读

拖拽事件 DragEvent

被拖动元素的事件属性
ondragstart	拖动开始
ondrag	拖动过程中，每隔几百毫秒触发一次
ondragend	拖动结束

接收被拖动元素的容器元素的事件属性
ondragenter	被拖动元素进入容器元素
ondragover	被拖动元素在容器元素上方，每隔几百毫秒触发一次
ondragleave	被拖动元素离开容器元素
ondrop	松开鼠标后，被拖动元素放入容器元素

所有拖拽事件的实例都有一个 DragEvent.dataTransfer 属性，用来读写需要传递的数据。这个属性的值是一个 DataTransfer 接口的实例。

DataTransfer 的实例方法
DataTransfer.setData(key, value)	接受两个字符串作为参数，第一参数表示数据类型，第二个表示具体数据
DataTransfer.getData(key)	返回事件所带的指定类型的数据。不存在则返回空字符串
DataTransfer.clearData()	删除事件所带的指定类型的数据。没指定类型则删除所有数据

DataTransfer 的实例属性
DataTransfer.dropEffect	效果: copy、move、link、none
DataTransfer.effectAllowed	允许的效果: copy、move、link、copyLink、copyMove、linkMove、all、none
DataTransfer.files	拖拽的文件数组，包含一组本地文件，可以用来在拖拽操作中传送
DataTransfer.types	拖拽的文件的数据格式，数据格式(MIME 值)，比如 text/plain
DataTransfer.items	返回一个类似数组的只读对象，每个成员就是本次拖拽的一个对象

滚轮事件 WheelEvent

WheelEvent 接口表示用户滚动鼠标滚轮或类似的输入设备时触发的事件。

实例属性

• WheelEvent.deltaX 只读 返回一个 double 值，该值表示滚轮的横向滚动量。
• WheelEvent.deltaY 只读 返回一个 double 值，该值表示滚轮的纵向滚动量。
• WheelEvent.deltaZ 只读 返回一个 double 值，该值表示滚轮的 z 轴方向上的滚动量。
• WheelEvent.deltaMode 只读 返回一个 unsigned long 值，该值表示上述各 delta* 的值的单位。

静态常量

• WheelEvent.DOM_DELTA_PIXEL delta 的单位为像素。
• WheelEvent.DOM_DELTA_LINE delta 单位为行。
• WheelEvent.DOM_DELTA_PAGE delta 单位为页。

键盘事件 KeyboardEvent

1. 键盘事件由用户击打键盘触发，主要有 keydown，keypress，keyup 三个事件，它们都继承了 KeyboardEvent 接口。
2. 当用户一直按键不松开，就会就会连续触发键盘事件，keydown-->keypress-->keydown-->keypress-->...-->keyup

KeyboardEvent 实例属性
KeyboardEvent.altKey	是否按下 Alt 键
KeyboardEvent.ctrlKey	是否按下 Ctrl 键
KeyboardEvent.metaKey	是否按下 meta 键
KeyboardEvent.shiftKey	是否按下 Shift 键
KeyboardEvent.code	返回一个字符串，表示当前按键的字符串形式，只读
KeyboardEvent.key	返回一个字符串，变回当前按键的键名，只读
KeyboardEvent.repeat	返回一个布尔值，表示该键是否按着不放

KeyboardJS (opens new window)

组合输入事件 CompositionEvent

DOM 接口 CompositionEvent 表示用户间接输入文本（如使用输入法）时发生的事件。

此接口的常用事件有

• compositionstart
• compositionupdate
• compositionend

触摸事件 TouchEvent

TOuch 触摸事件的种类

触摸事件
touchstart	用户开始触摸时，target 返回发生触摸的元素节点
touchend	用户不在接触触摸屏时，target 同上，changTouches 返回所有不在触摸的点
touchmove	用户移动触摸点时，target 同上，注意当触摸的半径角度力度变化时也会触发
touchcancel	触摸点取消时触发

其他常用事件

动画事件 AnimationEvent

TIP

TODO

剪贴板事件 ClipboardEvent

剪贴板事件
cut	将选中的内容从文档中移除，加入剪贴板时触发
copy	进行复制动作时触发
paste	剪贴板内容粘贴到文档后触发

进度事件 ProgressEvent

进度事件用来描述资源加载的进度，主要有Ajax请求、<img>、<audio>、<video>、<style>、<link>等外部资源的加载触发，继承了 ProgressEvent 接口。它主要包含以下几种事件。

进度事件
abort	外部资源中止加载时
error	由于错误导致外部资源无法加载时
load	外部资源加载成功时
loadstart	外部资源开始加载时
loadend	外部资源停止加载时触发，发生顺序排在最后
progress	外部资源加载过程中不断触发
timeout	加载超时时触发