English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Sending DOM events is to notify the code of the interesting things that have happened.
Events are usually used in conjunction with functions, and the function will not be executed before the event occurs (for example, when the user clicks a button).
Events can represent everything, from basic user interactions to automatic notifications of things happening in the presentation model.
| Activity name | Description | Event Type |
|---|---|---|
| abort | This event occurs when the resource loading is aborted. | UiEvent, Event |
| afterprint | This event occurs when the related document has started printing or the print preview has been closed. | Event |
| animationend | This event occurs when the CSS animation is completed. | AnimationEvent |
| animationiteration | This event occurs when the CSS animation is repeated. | AnimationEvent |
| animationstart | This event occurs when the CSS animation starts. | AnimationEvent |
| beforeprint | This event occurs when the related document is about to be printed or previewed for printing. | Event |
| beforeunload | This event occurs when the window, document, and its resources are about to be unloaded | UiEvent, Event |
| blur | This event occurs when an element loses focus (does not bubble) | FocusEvent |
| canplay | This event occurs when the browser can start playing media (when it has enough buffering to start playing) | Event |
| canplaythrough | This event occurs when the browser can play media without stopping buffering | Event |
| change | This event occurs when the content of a form element, selection, or selected state changes (for <input>, <select>, and <textarea>) | Event |
| click | This event occurs when the user clicks an element | MouseEvent |
| contextmenu | This event occurs when the user right-clicks an element to open a context menu | MouseEvent |
| copy | This event occurs when the user copies the content of an element | ClipboardEvent |
| cut | This event occurs when the user cuts the content of an element | ClipboardEvent |
| dblclick | This event occurs when the user double-clicks an element | MouseEvent |
| drag | This event occurs while dragging an element | DragEvent |
| dragend | This event occurs when the user finishes dragging the element | DragEvent |
| dragenter | This event occurs when the dragged element enters the drop target | DragEvent |
| dragleave | This event occurs when the dragged element leaves the drop target | DragEvent |
| dragover | This event occurs when the dragged element is over the drop target | DragEvent |
| dragstart | This event occurs when the user starts dragging an element | DragEvent |
| drop | This event occurs when the dragged element is placed on the drop target | DragEvent |
| durationchange | This event occurs when the duration of the media changes | Event |
| ended | This event occurs when the media reaches the end (useful for messages like 'Thank you for listening') | Event |
| error | This event occurs when a resource fails to load | ProgressEvent, UiEvent, Event |
| focus | An event occurs when an element has gained focus (does not bubble) | FocusEvent |
| focusin | This event occurs when an element is about to gain focus | FocusEvent |
| focusout | This event occurs when an element is about to lose focus | FocusEvent |
| fullscreenchange | An event occurs when an element is displayed in full-screen mode | Event |
| fullscreenerror | This event occurs when an element cannot be displayed in full-screen mode | Event |
| hashchange | This event occurs when the anchor part of the URL changes | HashChangeEvent |
| input | An event occurs when an element receives user input | InputEvent, Event |
| invalid | This event occurs when an element is invalid | Event |
| keydown | This event occurs when the user presses a key | KeyboardEvent |
| keypress | An event occurs when the user presses a key | KeyboardEvent |
| keyup | This event occurs when the user releases a key. | KeyboardEvent |
| load | This event occurs when the object is loaded. | UiEvent, Event |
| loadeddata | This event occurs when media data is loaded. | Event |
| loadedmetadata | This event occurs when metadata (such as dimensions and duration) is loaded. | Event |
| loadstart | This event occurs when the browser starts looking for the specified media. | ProgressEvent |
| message | This event occurs when a message is received from the event source. | Event |
| mousedown | This event occurs when the user presses the mouse button over an element. | MouseEvent |
| mouseenter | This event occurs when the pointer moves over an element. | MouseEvent |
| mouseleave | This event occurs when the pointer moves out of an element. | MouseEvent |
| mousemove | This event occurs when the pointer moves over an element. | MouseEvent |
| mouseover | This event occurs when the pointer moves over an element or one of its child elements. | MouseEvent |
| mouseout | This event occurs when the mouse pointer is moved out of an element or one of its child elements. | MouseEvent |
| mouseup | This event occurs when the user releases the mouse button over an element. | MouseEvent |
| mousewheel | Not recommended for use.Switch to the wheel event | WheelEvent |
| offline | This event occurs when the browser starts working offline. | Event |
| online | This event occurs when the browser starts working online. | Event |
| open | This event occurs when a connection to the event source is opened. | Event |
| pagehide | This event occurs when the user leaves the webpage navigation. | PageTransitionEvent |
| Page display | This event occurs when the user navigates to a webpage. | PageTransitionEvent |
| paste | This event occurs when the user pastes some content into an element. | ClipboardEvent |
| pause | This event occurs when the user or the media is paused programmatically. | Event |
| play | This event occurs when the media starts or is no longer paused. | Event |
| playing | This event occurs when the media is played after pausing or stopping buffering. | Event |
| popstate | This event occurs when the history of the window changes. | PopStateEvent |
| progress | This event occurs when the browser is fetching media data (downloading media) in the process. | Event |
| ratechange | This event occurs when the playback speed of the media is changed. | Event |
| resize | This event occurs when the document view size is adjusted. | UiEvent, Event |
| reset | This event occurs when the form is reset. | Event |
| scroll | An event occurs when the user scrolls the scrollbar of a scrollable element. | UiEvent, Event |
| search | This event occurs when the user enters content in the search field (for <input="search">). | Event |
| seeked | When the user finishes moving/This event occurs when the user jumps to a new position in the media. | Event |
| seeking | When the user starts moving/This event occurs when the user jumps to a new position in the media. | Event |
| select | An event occurs when the user selects some text (for <input> and <textarea>). | UiEvent, Event |
| show | This event occurs when the <menu> element is displayed as a context menu | Event |
| stalled | This event occurs when the browser tries to fetch media data but the data is not available | Event |
| storage | This event occurs when the web storage area is updated | StorageEvent |
| submit | This event occurs when a form is submitted | Event |
| suspend | This event occurs when the browser intentionally does not fetch media data | Event |
| timeupdate | This event occurs when the playback position changes (e.g., when the user fast-forwards to another point in the media) | Event |
| toggle | This event occurs when the user opens or closes the <details> element | Event |
| touchcancel | This event occurs when the touch is interrupted | TouchEvent |
| touchend | This event occurs when a finger is lifted off the touch screen | TouchEvent |
| touchmove | This event occurs when a finger is dragged on the screen | TouchEvent |
| touchstart | This event occurs when a finger is placed on the touch screen | TouchEvent |
| transitionend | This event occurs when the CSS transition is completed | TransitionEvent |
| unload | This event occurs when the document or its dependent resources are unloaded | UiEvent, Event |
| volumechange | This event occurs when the volume of the media has changed (including setting the volume to 'mute') | Event |
| waiting | This event occurs when media has paused but is expected to resume (e.g., media paused to buffer more data) | Event |
| wheel | This event occurs when the mouse wheel scrolls up or down over an element | WheelEvent |
The following table lists the properties of DOM events:
| Properties | Description | Event Type |
|---|---|---|
| altKey | Returns whether the 'ALT' key was pressed when the mouse event was triggered | MouseEvent |
| altKey | Returns whether the 'ALT' key was pressed when the key event was triggered | KeyboardEvent, TouchEvent |
| animationName | Returns the name of the animation | AnimationEvent |
| bubbles | Returns whether a specific event is a bubbling event | Event |
| button | Returns the mouse button pressed when the mouse event is triggered | MouseEvent |
| buttons | Returns the mouse button pressed when the mouse event is triggered | MouseEvent |
| cancelable | Returns whether the event can prevent its default action | Event |
| charCode | Returns the Unicode character code of the key that triggered the onkeypress event | KeyboardEvent |
| changeTouches | Returns a list of all touch objects whose state changed between the last touch and this touch | TouchEvent |
| clientX | Returns the horizontal coordinate of the mouse pointer relative to the current window when the mouse event was triggered | MouseEvent, TouchEvent |
| clientY | Returns the vertical coordinate of the mouse pointer relative to the current window when the mouse event was triggered | MouseEvent, TouchEvent |
| clipboardData | Returns an object that contains the data affected by clipboard operations | ClipboardData |
| code | Returns the code of the key that triggered the event | KeyboardEvent |
| composed | Returns whether the event is composed | Event |
| ctrlKey | Returns whether the 'CTRL' key was pressed when the mouse event was triggered | MouseEvent |
| ctrlKey | Returns whether the 'CTRL' key is pressed when the key event is triggered | KeyboardEvent, TouchEvent |
| currentTarget | Returns the element that triggers the event of its event listener | Event |
| data | Returns the inserted character | InputEvent |
| dataTransfer | Returns an object that contains the data to be dragged and dropped/Data inserted or deleted | DragEvent, InputEvent |
| defaultPrevented | Returns whether the preventDefault() method is called for the event | Event |
| deltaX | Returns the horizontal scroll amount of the mouse wheel (x-axis) | WheelEvent |
| deltaY | Returns the vertical scroll amount of the mouse wheel (y-axis) | WheelEvent |
| deltaZ | Returns the scroll amount of the mouse wheel on the Z-axis | WheelEvent |
| deltaMode | Returns a number indicating the unit of measurement for the increment value (pixels, lines, or pages) | WheelEvent |
| detail | Returns a number indicating how many times the mouse has been clicked | UiEvent |
| elapsedTime | Returns the number of seconds the animation has run | AnimationEvent |
| elapsedTime | Returns the number of seconds the transition has run | |
| eventPhase | Returns which stage of the event stream is currently being evaluated | Event |
| inputType | Returns the type of change (i.e., 'insert' or 'delete') | InputEvent |
| isComposing | Returns whether the state of the event is being composed | InputEvent, KeyboardEvent |
| isTrusted | Returns whether the event is trusted | Event |
| key | Returns the key value of the key represented by the event | KeyboardEvent |
| key | Returns the key of the stored item that has been changed | StorageEvent |
| keyCode | Returns the Unicode character code of the key that triggered the onkeypress event, or the Unicode key code of the key that triggered the onkeydown or onkeyup event. | KeyboardEvent |
| location | Returns the position of the key on the keyboard or device | KeyboardEvent |
| lengthComputable | Returns whether the length of the progress can be calculated | ProgressEvent |
| loaded | Returns the amount of work loaded | ProgressEvent |
| metaKey | Returns whether the 'META' key is pressed when the event is triggered | MouseEvent |
| metaKey | Returns whether the 'meta' key is pressed when the key event is triggered | KeyboardEvent, TouchEvent |
| MovementX | Returns the horizontal coordinate of the mouse pointer relative to the position of the last mousemove event | MouseEvent |
| MovementY | Returns the vertical coordinate of the mouse pointer relative to the position of the last mousemove event | MouseEvent |
| newValue | Returns the new value of the stored item that has been changed | StorageEvent |
| newURL | Returns the URL of the document after the hash value change | HasChangeEvent |
| offsetX | Returns the horizontal coordinate of the mouse pointer relative to the edge of the target element | MouseEvent |
| offsetY | Returns the vertical coordinate of the mouse pointer relative to the edge of the target element | MouseEvent |
| oldValue | Returns the old value of the stored item that has been changed | StorageEvent |
| oldURL | Returns the URL of the document before the hash change | HasChangeEvent |
| onemptied | This event occurs when an adverse situation occurs and the media file suddenly becomes unavailable (for example, an unexpected disconnection) | |
| pageX | Returns the horizontal coordinate of the mouse pointer relative to the document when the mouse event was triggered | MouseEvent |
| pageY | Returns the vertical coordinate of the mouse pointer relative to the document when the mouse event was triggered | MouseEvent |
| persisted | Returns whether the web page has been cached by the browser | PageTransitionEvent |
| propertyName | Returns the name of the CSS property associated with the animation or transition | AnimationEvent, TransitionEvent |
| pseudoElement | Returns the name of the pseudo-element associated with the animation or transition | AnimationEvent, TransitionEvent |
| region | MouseEvent | |
| relatedTarget | Returns the element related to the element that triggered the mouse event | MouseEvent |
| relatedTarget | Returns the element related to the element that triggered the event | FocusEvent |
| repeat | Returns whether a key is held down repeatedly | KeyboardEvent |
| screenX | Returns the horizontal coordinate of the mouse pointer relative to the screen when the event was triggered | MouseEvent |
| screenY | Returns the vertical coordinate of the mouse pointer relative to the screen when the event was triggered | MouseEvent |
| shiftKey | Returns whether the 'SHIFT' key was pressed when the event was triggered | MouseEvent |
| shiftKey | Returns whether the 'SHIFT' key was pressed when the key event was triggered | KeyboardEvent, TouchEvent |
| state | Returns an object containing a copy of the history entry | PopStateEvent |
| storageArea | Returns an object representing the affected storage object | StorageEvent |
| target | Returns the element that triggered the event | Event |
| targetTouches | Returns a list of all touch objects in contact with the surface and on the target element where the touchstart event occurred, which is the same as the current target element | TouchEvent |
| timeStamp | Returns the time at which the event was created (in milliseconds relative to the epoch) | Event |
| total | Returns the total amount of work to be loaded | ProgressEvent |
| touches | Returns a list of all touch objects currently in contact with the surface | TouchEvent |
| transitionend | This event occurs when the CSS transition is completed | TransitionEvent |
| type | Returns the name of the event | Event |
| url | Returns the URL of the document whose items have been changed | StorageEvent |
| which | Returns the mouse button pressed when the mouse event is triggered | MouseEvent |
| which | Returns the Unicode character code of the key that triggered the onkeypress event, or the Unicode key code of the key that triggered the onkeydown or onkeyup event. | KeyboardEvent |
| view | Returns a reference to the Window object where the event occurred | UiEvent |
The following table lists the methods of DOM events:
| Method | Description | Event Type |
|---|---|---|
| createEvent() | Create a new event | Event |
| getTargetRanges() | Returns an array containing the target range that will be affected by the insertion/Impact of deletion | InputEvent |
| getModifierState() | Returns an array containing the target range that will be affected by the insertion/Impact of deletion | MouseEvent |
| preventDefault() | Prevent the browser from executing the default action of the selected element | Event |
| stopImmediatePropagation() | Prevent other listeners for the same event from being called | Event |
| stopPropagation() | Prevent further propagation of the event in the event flow | Event |
Javascript Tutorial:Javascript Events
Javascript Tutorial:Event Listener
Javascript Tutorial:Event Propagation