When I wrote “BOM and DOM(4) again :HTML DOM Event Objects”, I didn’t go into detail about Event objects and various DOM events. Here are some tables. For future reference.

The Event object

The Event object represents the state of the Event, such as the element in which the Event occurred, the state of the keyboard key, the position of the mouse, and the state of the mouse button.

Events are usually used in conjunction with functions, which are not executed before the event occurs!

Event Handlers

One of the new features of HTML 4.0 is the ability to cause HTML events to trigger actions in the browser, such as launching a piece of JavaScript when a user clicks on an HTML element. Below is a list of attributes that you can insert into HTML tags to define the behavior of the event.

attribute

This event occurred when…

onabort

Image loading is interrupted.

onblur

The element loses focus.

onchange

The contents of the domain are changed.

onclick

The event handle that is called when the user clicks on an object.

ondblclick

The event handle that is called when a user double-clicks an object.

onerror

An error occurred while loading a document or image.

onfocus

The element gets focus.

onkeydown

A keyboard key was pressed.

onkeypress

A keyboard key is pressed and released.

onkeyup

A keyboard key has been released.

onload

A page or an image finishes loading.

onmousedown

The mouse button is pressed down.

onmousemove

The mouse is moved.

onmouseout

Move the mouse pointer away from an element.

onmouseover

Mouse over an element.

onmouseup

The mouse button is released.

onreset

The reset button is clicked.

onresize

The window or frame is resized.

onselect

Text is selected.

onsubmit

Confirm that the button is clicked.

onunload

The user exits the page.

Mouse/keyboard properties

attribute

describe

altKey

Returns whether “ALT” was pressed when the event was triggered.

button

Returns which mouse button was clicked when the event was triggered.

clientX

Returns the horizontal coordinates of the mouse pointer when the event is triggered.

clientY

Returns the vertical coordinates of the mouse pointer when the event is raised.

ctrlKey

Returns whether the “CTRL” key was pressed when the event was triggered.

metaKey

Returns whether the “meta” key is pressed when the event is triggered.

relatedTarget

Returns the node associated with the target node of the event.

screenX

Returns the horizontal coordinates of the mouse pointer when an event is triggered.

screenY

Returns the vertical coordinates of the mouse pointer when an event is triggered.

shiftKey

Returns whether the “SHIFT” key is pressed when the event is triggered.

Mouse events

attribute

describe

DOM

onclick

The event handle that is called when the user clicks on an object.

2

oncontextmenu

Triggered when the user clicks the right mouse button to open a context menu

ondblclick

The event handle that is called when a user double-clicks an object.

2

onmousedown

The mouse button is pressed down.

2

onmouseenter

Triggered when the mouse pointer moves over an 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

Move the mouse pointer away from an element.

2

onmouseup

The mouse button is released.

2

Keyboard events

attribute

describe

DOM

onkeydown

A keyboard key was pressed.

2

onkeypress

A keyboard key is pressed and released.

2

onkeyup

A keyboard key has been released.

Frame/Object events

attribute

describe

DOM

onabort

Image loading is interrupted. ( <object)

2

onbeforeunload

This event is triggered when you are about to leave the page (refresh or close)

2

onerror

An error occurred while loading a document or image. (< < body and object, < frameset)

onhashchange

This event is triggered when the anchor part of the current URL is modified.

onload

A page or an image finishes loading.

2

onpageshow

This event is triggered when the user accesses the page

onpagehide

This event is triggered when the user leaves the current page and jumps to another page

onresize

The window or frame is resized.

2

onscroll

An event that occurs when a document is scrolled.

2

onunload

The user exits the page. (< body and < frameset)

2

Form events

attribute

describe

DOM

onblur

Triggered when an element loses focus

2

onchange

This event is emitted when the content of a form element changes (<input, <keygen, < SELECT, and <textarea)

2

onfocus

Emitted when the element gets focus

2

onfocusin

Emitted when the element is about to gain focus

2

onfocusout

Triggered when an element is about to lose focus

2

oninput

Raised when the element gets user input

3

onreset

Triggered when the form resets

2

onsearch

Triggered when the user enters text into the search field (<input=”search”)

onselect

Triggered when the user selects text (<input and <textarea)

2

onsubmit

Triggered when the form is submitted

2

Clipboard events

attribute

describe

DOM

oncopy

This event is triggered when the user copies the element’s content

oncut

This event is triggered when the user clippings the element’s content

onpaste

This event is triggered when the user pastes element content

Drag events

The event

describe

DOM

ondrag

This event is emitted while the element is dragging

ondragend

This event is triggered when the user finishes dragging the element

ondragenter

This event is emitted when the dragged element enters the drop target

ondragleave

This event is triggered when an element is dragged away from the placement target

ondragover

This event is triggered when you drag an element over a place target

ondragstart

This event is triggered when the user starts dragging elements

ondrop

This event is triggered when the drag element is placed in the target region

Media events

The event

describe

DOM

onabort

Event emitted when audio/video stops loading.

oncanplay

The event is triggered when the user can start playing audio/video.

oncanplaythrough

The event is triggered when audio/video can play normally without pausing and buffering.

ondurationchange

Events are triggered when the duration of audio/video changes.

onemptied

Triggered when the current playlist is empty

onended

The event is emitted at the end of audio/video playback.

onerror

Event is emitted when an error occurs during audio/video data loading.

onloadeddata

The event is triggered when the current audio/video frame is loaded by the browser.

onloadedmetadata

The event is emitted after the metadata for the specified audio/video is loaded.

onloadstart

The event is triggered when the browser starts looking for the specified video/audio.

onpause

The event is triggered when audio/video is paused.

onplay

The event is emitted when audio/video starts playing.

onplaying

The event is emitted when audio/video is paused or ready to resume playing after buffering.

onprogress

Event is raised when the browser downloads the specified audio/video.

onratechange

The event is emitted when the audio/video playback speed transmission changes.

onseeked

The event is triggered when the user relocates the audio/video playback position.

onseeking

Event is emitted when the user begins to relocate audio/video.

onstalled

Event is emitted when the browser has retrieved media data, but the media data is not available.

onsuspend

Event is raised when the browser stops reading media data.

ontimeupdate

Event emitted when the current playback position is sent changed.

onvolumechange

Event emitted when the volume changes.

onwaiting

The event is emitted when the video needs to be buffered for the next frame to play.

Animation events

The event

describe

DOM

animationend

This event is triggered when the CSS animation ends playing

animationiteration

This event is triggered when the CSS animation is repeated

animationstart

This event is triggered when the CSS animation starts playing

Transition events

The event

describe

DOM

transitionend

This event is triggered after the CSS transition is complete.

Other events

The event

describe

DOM

onmessage

This Event is emitted when a message is received through or from an object (WebSocket, Web Worker, Event Source, or child frame or parent window)

onmousewheel

Has been abandoned. Use the onWheel event instead

ononline

This event is triggered when the browser starts working online.

onoffline

This event is triggered when the browser starts working offline.

onpopstate

This event is emitted when the window’s browsing history object changes.

onshow

This event is emitted when the <menu element is displayed in the context menu

onstorage

This event is triggered when the Web Storage(HTML 5 Web Storage) is updated

ontoggle

This event is triggered when the user opens or closes the < Details element

onwheel

This event is triggered when the mouse wheel is rolled up or down the element

HTML emoticon related events

Reference article:

ECMAScript, BOM, DOM (core, browser object model and the document object model (DOM) www.cnblogs.com/best/p/8028…

JavaScript learning summary (3) the BOM and the DOM, rounding segmentfault.com/a/119000000…

Javascript BOM and DOM operation explanation (1) blog.csdn.net/openbox2008…

JavaWeb: JavaScript (BOM and DOM) blog.csdn.net/weixin\_423…

The HTML DOM Event object www.w3school.com.cn/jsref/dom_o…

The XML DOM object Element – www.w3school.com.cn/xmldom/dom_…

JAVAScript DOM and variance analysis of BOM www.cnblogs.com/fjner/p/589…

The HTML DOM Event object www.w3school.com.cn/jsref/dom_o…

Javascript BOM and DOM operation explanation (2) blog.csdn.net/openbox2008…

Reprint the home station article talk about BOM and DOM (7) : the HTML DOM Event object properties and DOM events detailed list “, please indicate the source: www.zhoulujun.cn/html/webfro…