Latest web development tutorials

HTML DOM event object

HTML DOM event

HTML DOM event allows Javascript register different event handlers in an HTML document element.

Events often used in conjunction with the function, the function will not be executed before the event occurs! (Such as the user clicks the button).

Tip: standardized event model in W3C Level 2 DOM event.

HTML DOM event

DOM: DOM attribute indicates the level of use.

Mouse events

Attributes description DOM
onclick Event called when a user clicks on an object handle. 2
oncontextmenu Triggered when the user clicks the right mouse button to open the context menu
ondblclick Event called when the user double-clicks an object handle. 2
onmousedown Mouse button is pressed. 2
onmouseenter Fires when the mouse pointer moves to the elements. 2
onmouseleave When the mouse pointer moves out of the trigger element 2
onmousemove The mouse is moved. 2
onmouseover Mouse over an element. 2
onmouseout Mouse away from an element. 2
onmouseup The mouse button is released. 2

Keyboard events

属性 描述 DOM
onkeydown 某个键盘按键被按下。 2
onkeypress 某个键盘按键被按下并松开。 2
onkeyup 某个键盘按键被松开。 2

Frame / Object (Frame / Object) event

属性 描述 DOM
onabort 图像的加载被中断。 ( <object>) 2
onbeforeunload 该事件在即将离开页面（刷新或关闭）时触发 2
onerror 在加载文档或图像时发生错误。 ( <object>, <body>和 <frameset>)
onhashchange 该事件在当前 URL 的锚部分发生修改时触发。
onload 一张页面或一幅图像完成加载。 2
onpageshow 该事件在用户访问页面时触发
onpagehide 该事件在用户离开当前网页跳转到另外一个页面时触发
onresize 窗口或框架被重新调整大小。 2
onscroll 当文档被滚动时发生的事件。 2
onunload 用户退出页面。 ( <body> 和 <frameset>) 2

Form events

属性 描述 DOM
onblur 元素失去焦点时触发 2
onchange 该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>) 2
onfocus 元素获取焦点时触发 2
onfocusin 元素即将获取焦点时触发 2
onfocusout 元素即将失去焦点时触发 2
oninput 元素获取用户输入时触发 3
onreset 表单重置时触发 2
onsearch 用户向搜索域输入文本时触发 ( <input="search">)  
onselect 用户选取文本时触发 ( <input> 和 <textarea>) 2
onsubmit 表单提交时触发 2

Clipboard events

Attributes description DOM
oncopy The event is triggered when the user copies the element content
oncut The event is triggered when the user shear element content
onpaste The event is triggered when the user paste the element content

Print Event

Attributes description DOM
onafterprint The trigger event has already started printing the page, or print the window is already closed
onbeforeprint The event is triggered when the page is about to start printing

Drag event

event description DOM
ondrag The event is triggered when the element is being dragged
ondragend The event is triggered when the user drags the elements to complete
ondragenter This event is triggered when the dragged element into the drop target
ondragleave This event is triggered when the drag element to leave the drop target
ondragover The event is triggered when the target is placed on the drag element
ondragstart The event is triggered when the user starts dragging elements
ondrop This event is triggered when the drag element is placed in the target area

Multimedia (Media) Event

event description DOM
onabort Event video / audio (audio / video) to terminate trigger when loading.
oncanplay When the event is triggered in the user can start playing video / audio (audio / video).
oncanplaythrough Trigger event can play in normal video / audio (audio / video) and without pause and buffer.
ondurationchange Event video / audio (audio / video) Duration trigger change.
onemptied Trigger list is empty, the current player
onended At the end of play in the event trigger video / audio (audio / video).
onerror Event triggered when an error occurs during video / audio (audio / video) data is loaded.
onloadeddata Event in the browser to load the video / audio (audio / video) Trigger current frame.
onloadedmetadata Event metadata specified video / audio (audio / video) trigger after loading.
onloadstart Event in the browser to start looking specified video / audio (audio / video) trigger.
onpause Trigger event in the video / audio (audio / video) Pause.
onplay Event triggered to start playing the video / audio (audio / video).
onplaying Event video / audio (audio / video) Pause or after buffering is triggered when ready to start playing again.
onprogress Event Trigger (audio / video) specified in the browser to download video / audio.
onratechange Trigger change event when sending video / audio (audio / video) playback speed.
onseeked In the event the user to reposition the video / audio (audio / video) playback position triggered.
onseeking Fires when the user starts to reposition event video / audio (audio / video).
onstalled Get Media event data in the browser, but the media data is not available when triggered.
onsuspend Event triggered suspension of media data in the browser to read.
ontimeupdate Event triggered when the current playback position to send change.
onvolumechange Event triggered when the volume change.
onwaiting Since the event is triggered when the video you want to play the next frame buffer is required.

Animation events

event description DOM
animationend This event is triggered when the animation finishes playing CSS
animationiteration This event is triggered when the CSS animations repeat
animationstart This event is triggered when the animation starts playing CSS

Transition event

event description DOM
transitionend The event is triggered after the CSS to complete the transition.

Other events

event description DOM
onmessage When the event is triggered by or from an object (WebSocket, Web Worker, Event Source or sub-frame or parent window) receives the message
onmousewheel Obsolete. Use onwheel event substitute
ononline This event is triggered when the browser to work online.
onoffline This event is triggered when the browser should start working offline.
onpopstate This event is triggered when the browsing history (history objects) of the window changes.
onshow The event when the <menu> element is displayed in the context menu trigger
onstorage This event is triggered when Web Storage (HTML 5 Web store) update
ontoggle The event is triggered when the user opens or closes <details> element
onwheel This event is triggered when the mouse wheel to scroll up and down in element

Event objects

constant

静态变量 描述 DOM
CAPTURING-PHASE 当前事件阶段为捕获阶段(3) 1
AT-TARGET 当前事件是目标阶段,在评估目标事件(1) 2
BUBBLING-PHASE 当前的事件为冒泡阶段 (2) 3

Attributes

Attributes description DOM
bubbles Returns a Boolean value that indicates whether the event is a bubbling event type. 2
cancelable Returns a Boolean value that indicates whether the event can cancel the default action pro. 2
currentTarget Returns its event listeners triggered the event element. 2
eventPhase Returns the current stage of the event spread. 2
target Returns the element that triggered this event (the event target node). 2
timeStamp Returns the date and time of the event generated. 2
type Returns the name of the current event Event object represents. 2

method

方法 描述 DOM
initEvent() 初始化新创建的 Event 对象的属性。 2
preventDefault() 通知浏览器不要执行与事件关联的默认动作。 2
stopPropagation() 不再派发事件。 2

Target event object

method

方法 描述 DOM
addEventListener() 允许在目标事件中注册监听事件(IE8 = attachEvent()) 2
dispatchEvent() 允许发送事件到监听器上 (IE8 = fireEvent()) 2
removeEventListener() 运行一次注册在事件目标上的监听事件(IE8 = detachEvent()) 2

Object Event Listener

method

方法 描述 DOM
handleEvent() 把任意对象注册为事件处理程序 2

Document Object Event

method

方法 描述 DOM
createEvent() 2

Mouse / keyboard event object

Attributes

属性 描述 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