本文详细介绍了DOM的Event模块，包括HTMLEvents、MouseEvents和UIEvents三个子模块，以及Event、UIEvent和MouseEvent接口的属性和方法。此外还列举了各种事件类型、它们的接口、是否冒泡、是否有默认动作及支持的标签。
- 2级DOM的Event模块包括HTMLEvents模块，MouseEvents模块，UIEvents模块。
HTMLEvents模块提供对Event类型事件的支持：abort,blur,change,erro,focus,load,reset,resize,scroll,select,submit,unload
MouseEvents模块提供对MouseEvent类型事件的支持：click,mousedown,mousemove,mouseout,mouseover,mouseup
UIEvents模块提供对UIEvent类型事件的支持：DOMActivate,DOMFocusIn,DOMFocusOut
Event接口定义了如下属性
- type: 发生的事件类型，如click，mouseover
- target： 发生事件的节点，可能与currentTarget不同
- currentTarget： 当前正在运行时间句柄的节点
- eventPhase: 一个数字，指定当前所处的事件传播过程的阶段。它的值为常量：Event.CAPTURING_PHASE、Event.AT_TARGET、Event.BUBBLING_PHASE
- timeStamp: 一个Date对象，声明了事件何时发生。
- bubbles: 一个布尔值，声明该事件是否在文档树中起泡
- cancelable： 一个布尔值，声明该事件是否有默认动作。
Event接口定义的方法：
- stopPropagation()： 阻止事件传播
- preventDefault()： 阻止执行默认动作
UIEvent接口：
Event接口的子接口，MouseEvent接口的父接口。
定义了两个属性：
- view: 发生事件的Window对象（视图对象）
- detail： 一个数字。提供事件的额外信息。对于click，mousedown，mouseup事件，这个字段代表点击的次数。1代表一次，2代表两次，3代表3次。（每次点击生成一次事件----detail值为2的鼠标事件之前总有detail值为1的鼠标事件）。对于DOMActivate事件，1表示为正常激活，2表示超级激活。（如双击鼠标或同时按下Shift键和Enter键）
MouseEvent接口的属性：
- button: 一个数字，0--左键，1--中间键，2--右键。
- altKey,ctrlKey,shiftKey,metaKey：
- clientX,clientY： 声明鼠标在浏览器窗口的坐标
- screenX,screenY： 声明鼠标针对屏幕左上角的坐标
- relatedTarget： 引用与事件的目标节点相关的节点。（mouseover--鼠标离开的节点，mouseout--鼠标将进入的节点）
- 事件类型名称：abort
- 事件接口：Event
- 是否冒泡：yes
- 默认动作：no
- 支持标签：<img>,<object>
- 详细属性： 事件类型名称：blur
- 事件接口：Event
- 是否冒泡：no
- 默认动作：no
- 支持标签：<a>,<area>,<button>,<input>,<label>,<select>,<textarea>
- 详细属性： 事件类型名称：change
- 事件接口：Event
- 是否冒泡：yes
- 默认动作：no
- 支持标签：<input>,<select>,<textarea>
- 详细属性： 事件类型名称：click
- 事件接口：MouseEvent
- 是否冒泡：yes
- 默认动作：yes
- 支持标签：
- 详细属性：screenX,screenY,clientX,clientY,altKey,ctrlKey,shiftKey,metaKey,button,detail 事件类型名称：error
- 事件接口：Event
- 是否冒泡：yes
- 默认动作：no
- 支持标签：<body>,<frameset>,<img>,<object>
- 详细属性： 事件类型名称：focus
- 事件接口：Event
- 是否冒泡：no
- 默认动作：no
- 支持标签：<a>,<area>,<button>,<input>,<label>,<select>,<textarea>
- 详细属性： 事件类型名称：load
- 事件接口：Event
- 是否冒泡：no
- 默认动作：no
- 支持标签：<body>,<frameset>,<iframe>,<img>,<object>
- 详细属性： 事件类型名称：mousedown
- 事件接口：MouseEvent
- 是否冒泡：yes
- 默认动作：yes
- 支持标签：
- 详细属性：screenX,screenY,clientX,clientY,altKey,ctrlKey,shiftKey,metaKey,button,detail 事件类型名称：mousemove
- 事件接口：MouseEvent
- 是否冒泡：yes
- 默认动作：no
- 支持标签：
- 详细属性：screenX,screenY,clientX,clientY,altKey,ctrlKey,shiftKey,metaKey 事件类型名称：mouseout
- 事件接口：MouseEvent
- 是否冒泡：yes
- 默认动作：yes
- 支持标签：
- 详细属性：screenX,screenY,clientX,clientY,altKey,ctrlKey,shiftKey,metaKey,relatedTarget 事件类型名称：mouseover
- 事件接口：MouseEvent
- 是否冒泡：yes
- 默认动作：yes
- 支持标签：
- 详细属性：screenX,screenY,clientX,clientY,altKey,ctrlKey,shiftKey,metaKey,relatedTarget 事件类型名称：mouseup
- 事件接口：MouseEvent
- 是否冒泡：yes
- 默认动作：yes
- 支持标签：
- 详细属性：screenX,screenY,clientX,clientY,altKey,ctrlKey,shiftKey,metaKey,button,detail 事件类型名称：reset
- 事件接口：Event
- 是否冒泡：yes
- 默认动作：no
- 支持标签：<form>
- 详细属性： 事件类型名称：resize
- 事件接口：Event
- 是否冒泡：yes
- 默认动作：no
- 支持标签：<body>,<frameset>,<iframe>
- 详细属性： 事件类型名称：scroll
- 事件接口：Event
- 是否冒泡：yes
- 默认动作：no
- 支持标签：<body>
- 详细属性： 事件类型名称：select
- 事件接口：Event
- 是否冒泡：yes
- 默认动作：no
- 支持标签：<input>,<textarea>
- 详细属性： 事件类型名称：submit
- 事件接口：Event
- 是否冒泡：yes
- 默认动作：yes
- 支持标签：<form>
- 详细属性： 事件类型名称：unload
- 事件接口：Event
- 是否冒泡：no
- 默认动作：no
- 支持标签：<body>,<frameset>
- 详细属性： 事件类型名称：DOMActivate
- 事件接口：UIEvent
- 是否冒泡：yes
- 默认动作：yes
- 支持标签：
- 详细属性：detail 事件类型名称：DOMFocusIn
- 事件接口：Event
- 是否冒泡：yes
- 默认动作：no
- 支持标签：none
- 详细属性：none 事件类型名称：DOMFocusOut
- 事件接口：Event
- 是否冒泡：yes
- 默认动作：no
- 支持标签：none
- 详细属性：none
扫一扫
2107
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
