HTML DOM
event
HTML DOM event
HTML DOM events allow Javascript to register different event handlers in HTML document elements.
Events are typically used in conjunction with functions, which are not executed before they occur!
(if the user clicks the button).
Tip: The
event model is regulated in the W3C Level 2 DOM event.
HTML DOM event
DOM: Indicates
the level of doM property used.
Mouse events
|
Property
|
Describe
|
Dom
|
|
onclick
|
The event handle that is called when the user clicks on an object.
|
2
|
|
oncontextmenu
|
Triggered when the user right-clicks to open the context menu
|
|
|
ondblclick
|
The event handle that is called when the user double-clicks an object.
|
2
|
|
onmousedown
|
The mouse button is pressed.
|
2
|
|
onmouseenter
|
Triggered when the mouse pointer moves over the element.
|
2
|
|
onmouseleave
|
Triggered when the mouse pointer moves out of the element
|
2
|
|
onmousemove
|
The mouse is moved.
|
2
|
|
onmouseover
|
Mouse over an element.
|
2
|
|
onmouseout
|
The mouse moves away from an element.
|
2
|
|
onmouseup
|
The mouse button is released.
|
2
|
Keyboard events
Frame/Object events
The form event
Clipboard events
|
Property
|
Describe
|
Dom
|
|
oncopy
|
The event is triggered when the user copies the contents of the element
|
|
|
oncut
|
The event is triggered when the user cuts the contents of the element
|
|
|
onpaste
|
The event is triggered when the user pastes the contents of the element
|
|
Print the event
|
Property
|
Describe
|
Dom
|
|
onafterprint
|
The event is triggered when the page has already started printing, or when the print window has closed
|
|
|
onbeforeprint
|
The event is triggered when the page is about to start printing
|
|
Drag the event
|
Event
|
Describe
|
Dom
|
|
ondrag
|
The event is triggered when the element is dragging
|
|
|
ondragend
|
The event is triggered when the user completes the drag of the element
|
|
|
ondragenter
|
The event is triggered when the dragged element enters the drop target
|
|
|
ondragleave
|
The event is triggered when the drag element leaves the drop target
|
|
|
ondragover
|
The event is triggered when the drag element is placed on the target
|
|
|
ondragstart
|
The event is triggered when the user starts dragging the element
|
|
|
ondrop
|
The event is triggered when the drag element is placed in the target area
|
|
Multimedia events
|
Event
|
Describe
|
Dom
|
|
onabort
|
The event is triggered when the video/audio/video terminates loading.
|
|
|
oncanplay
|
Events are triggered when the user can start playing video/audio/video.
|
|
|
oncanplaythrough
|
Events are triggered when video/audio (audio/video) plays normally and does not require pauses and buffering.
|
|
|
ondurationchange
|
The event is triggered when the length of the video/audio/video changes.
|
|
|
onemptied
|
Triggered when the current playlist is empty
|
|
|
onended
|
The event is triggered at the end of the video/audio/video playback.
|
|
|
onerror
|
The event is triggered when an error occurs during the video/audio/video data load.
|
|
|
onloadeddata
|
The event triggers when the browser loads the current frame of the video/audio/video.
|
|
|
onloadedmetadata
|
The event is triggered after the metadata for the specified video/audio /video is loaded.
|
|
|
onloadstart
|
The event starts looking for a specified video/audio/video trigger in the browser.
|
|
|
onpause
|
The event is triggered when the video/audio/video pauses.
|
|
|
onplay
|
The event is triggered when the video/audio/video starts playing.
|
|
|
onplaying
|
The event is triggered when the video/audio(audio/video) pauses or when you are ready to resume playback after buffering.
|
|
|
onprogress
|
The event is triggered when the browser downloads the specified video/audio/video.
|
|
|
onratechange
|
The event is triggered when the playback speed of the video/audio (audio/video) is changed.
|
|
|
onseeked
|
The event is triggered after the user repositions the playing position of the video/audio/video.
|
|
|
onseeking
|
The event is triggered when the user starts repositioning the video/audio.
|
|
|
onstalled
|
Events are triggered when the browser gets media data, but media data is not available.
|
|
|
onsuspend
|
The event is triggered when the browser reads the media data aborted.
|
|
|
ontimeupdate
|
The event is triggered when a change is sent at the current playback location.
|
|
|
onvolumechange
|
The event is triggered when the volume changes.
|
|
|
onwaiting
|
The event is triggered when the video needs to be buffered because the next frame is to be played.
|
|
Animated events
|
Event
|
Describe
|
Dom
|
|
animationend
|
The event is triggered when the CSS animation ends playing
|
|
|
animationiteration
|
The event is triggered when the CSS animation plays back
|
|
|
animationstart
|
The event is triggered when the CSS animation starts playing
|
|
Transition events
|
Event
|
Describe
|
Dom
|
|
transitionend
|
The event is triggered after the CSS completes the transition.
|
|
Other events
|
Event
|
Describe
|
Dom
|
|
onmessage
|
The event is triggered by either receiving a message from an object (WebSocket, Web Worker, Event Source, or a child frame or parent window).
|
|
|
onmousewheel
|
Abandoned.
Use
the onwheel event
instead
|
|
|
ononline
|
The event is triggered when the browser starts working online.
|
|
|
onoffline
|
The event is triggered when the browser starts working offline.
|
|
|
onpopstate
|
This event is triggered when the window's browsing history (history object) changes.
|
|
|
onshow
|
The event is triggered when the element is displayed in the context menu
|
|
|
onstorage
|
The event is triggered when the Web Storage (HTML 5 Web Storage) update occurs
|
|
|
ontoggle
|
The event is triggered when the user turns the element on or off
|
|
|
onwheel
|
This event is triggered when the mouse wheel scrolls up and down the element
|
|
The event object
Constant
|
静态变量
|
描述
|
DOM
|
|
CAPTURING-PHASE
|
当前事件阶段为捕获阶段(3)
|
1
|
|
AT-TARGET
|
当前事件是目标阶段,在评估目标事件(1)
|
2
|
|
BUBBLING-PHASE
|
当前的事件为冒泡阶段 (2)
|
3
|
Property
|
Property
|
Describe
|
Dom
|
|
bubbles
|
Returns a Boolean value indicating whether the event is a foaming event type.
|
2
|
|
cancelable
|
Returns the Boolean value, indicating whether the event can hold the default action that can be canceled.
|
2
|
|
currentTarget
|
Returns the element whose event listener triggered the event.
|
2
|
|
eventPhase
|
Returns the current stage of event propagation.
|
2
|
|
target
|
Returns the element that triggered the event (the target node of the event).
|
2
|
|
timeStamp
|
Returns the date and time the event was generated.
|
2
|
|
type
|
Returns the name of the event represented by the current Event object.
|
2
|
Method
|
方法
|
描述
|
DOM
|
|
initEvent()
|
初始化新创建的 Event 对象的属性。
|
2
|
|
preventDefault()
|
通知浏览器不要执行与事件关联的默认动作。
|
2
|
|
stopPropagation()
|
不再派发事件。
|
2
|
The target event object
Method
|
方法
|
描述
|
DOM
|
|
addEventListener()
|
允许在目标事件中注册监听事件(IE8= attachEvent())
|
2
|
|
dispatchEvent()
|
允许发送事件到监听器上 (IE8 =fireEvent())
|
2
|
|
removeEventListener()
|
运行一次注册在事件目标上的监听事件(IE8 =detachEvent())
|
2
|
The event listens to the object
Method
|
方法
|
描述
|
DOM
|
|
handleEvent()
|
把任意对象注册为事件处理程序
|
2
|
The document event object
Method
|
方法
|
描述
|
DOM
|
|
createEvent()
|
|
2
|
Mouse/keyboard event object
Property
|
属性
|
描述
|
DOM
|
|
altKey
|
返回当事件被触发时，"ALT" 是否被按下。
|
2
|
|
button
|
返回当事件被触发时，哪个鼠标按钮被点击。
|
2
|
|
clientX
|
返回当事件被触发时，鼠标指针的水平坐标。
|
2
|
|
clientY
|
返回当事件被触发时，鼠标指针的垂直坐标。
|
2
|
|
ctrlKey
|
返回当事件被触发时，"CTRL" 键是否被按下。
|
2
|
|
Location
|
返回按键在设备上的位置
|
3
|
|
charCode
|
返回onkeypress事件触发键值的字母代码。
|
2
|
|
key
|
在按下按键时返回按键的标识符。
|
3
|
|
keyCode
|
返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。
|
2
|
|
which
|
返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。
|
2
|
|
metaKey
|
返回当事件被触发时，"meta" 键是否被按下。
|
2
|
|
relatedTarget
|
返回与事件的目标节点相关的节点。
|
2
|
|
screenX
|
返回当某个事件被触发时，鼠标指针的水平坐标。
|
2
|
|
screenY
|
返回当某个事件被触发时，鼠标指针的垂直坐标。
|
2
|
|
shiftKey
|
返回当事件被触发时，"SHIFT" 键是否被按下。
|
2
|
Method
|
方法
|
描述
|
W3C
|
|
initMouseEvent()
|
初始化鼠标事件对象的值
|
2
|
|
initKeyboardEvent()
|
初始化键盘事件对象的值
|
3
|