Editing DOM event (section)

==== Common events ====
There is a huge collection of events that can be generated by most element nodes:
* [[Computer mouse|Mouse]] events.<ref>{{cite web|url=http://www.w3.org/TR/2010/WD-html5-20101019/dnd.html#the-dragevent-and-datatransfer-interfaces|title=7.8 Drag and drop — HTML5}}</ref><ref>{{cite web|url=https://developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop|title=HTML Drag and Drop API|date=28 March 2024 }}</ref>
* [[Computer keyboard|Keyboard]] events.
* HTML frame/object events.
* HTML form events.
* User interface events.
* Mutation events (notification of any changes to the structure of a document).
* Progress events<ref>{{cite web|url=http://www.w3.org/TR/progress-events/|title=Progress Events}}</ref> (used by [[XMLHttpRequest]] and File API<ref>{{cite web|url=http://www.w3.org/TR/FileAPI/#events|title=File API}}</ref>).

Note that the event classification above is not exactly the same as W3C's classification.

{| class="wikitable"
! Category
! [[#DOM Level 2|Type]]
! [[#DOM Level 0|Attribute]]
! Description
! Bubbles
! Cancelable
|-
| rowspan=14 | Mouse
| click
| onclick
| Fires when the [[pointing device]] button is clicked over an element. A click is defined as a mousedown and mouseup over the same screen location. The sequence of these events is:
* mousedown
* mouseup
* click
| {{Yes}}
| {{Yes}}
|-
| dblclick
| ondblclick
| Fires when the pointing device button is [[double-click]]ed over an element
| {{Yes}}
| {{Yes}}
|-
| mousedown
| onmousedown
| Fires when the pointing device button is pressed over an element
| {{Yes}}
| {{Yes}}
|-
| mouseup
| onmouseup
| Fires when the pointing device button is released over an element
| {{Yes}}
| {{Yes}}
|-
| [[mouseover]]
| onmouseover
| Fires when the pointing device is moved onto an element
| {{Yes}}
| {{Yes}}
|-
| mousemove<ref>{{Cite web|url=https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event|title=Element: Mousemove event - Web APIs &#124; MDN|date=22 December 2023 }}</ref>
| onmousemove
| Fires when the pointing device is moved while it is over an element
| {{Yes}}
| {{Yes}}
|-
| mouseout
| onmouseout
| Fires when the pointing device is moved away from an element
| {{Yes}}
| {{Yes}}
|-
| dragstart
| ondragstart
| Fired on an element when a drag is started.
| {{Yes}}
| {{Yes}}
|-
| drag
| ondrag
| This event is fired at the source of the drag, that is, the element where dragstart was fired, during the drag operation.
| {{Yes}}
| {{Yes}}
|-
| dragenter
| ondragenter
| Fired when the mouse is first moved over an element while a drag is occurring.
| {{Yes}}
| {{Yes}}
|-
| dragleave
| ondragleave
| This event is fired when the mouse leaves an element while a drag is occurring.
| {{Yes}}
| {{No}}
|-
| dragover
| ondragover
| This event is fired as the mouse is moved over an element when a drag is occurring.
| {{Yes}}
| {{Yes}}
|-
| drop
| ondrop
| The drop event is fired on the element where the drop occurs at the end of the drag operation.
| {{Yes}}
| {{Yes}}
|-
| dragend
| ondragend
| The source of the drag will receive a dragend event when the drag operation is complete, whether it was successful or not.
| {{Yes}}
| {{No}}
|-
| rowspan=3 | Keyboard
| keydown
| onkeydown
| Fires before keypress, when a key on the keyboard is pressed.
| {{Yes}}
| {{Yes}}
|-
| keypress
| onkeypress
| Fires after keydown, when a key on the keyboard is pressed. 
| {{Yes}}
| {{Yes}}
|-
| keyup
| onkeyup
| Fires when a key on the keyboard is released
| {{Yes}}
| {{Yes}}
|-
| rowspan=6 | [[Framing (World Wide Web)|HTML frame]]/object
| load
| onload
| Fires when the [[user agent]] finishes loading all content within a document, including window, frames, objects and images
For elements, it fires when the target element and all of its content has finished loading
| {{No}}
| {{No}}
|-
| unload
| onunload
| Fires when the user agent removes all content from a window or frame
For elements, it fires when the target element or any of its content has been removed
| {{No}}
| {{No}}
|-
| abort
| onabort
| Fires when an object/image is stopped from loading before completely loaded
| {{Yes}}
| {{No}}
|-
| error
| onerror
| Fires when an object/image/frame cannot be loaded properly
| {{Yes}}
| {{No}}
|-
| resize
| onresize
| Fires when a document view is resized
| {{Yes}}
| {{No}}
|-
| scroll
| onscroll
| Fires when an element or document view is scrolled
| {{No}}, except that a scroll event on document must bubble to the window<ref>{{cite web
 |url=http://www.w3.org/TR/DOM-Level-3-Events/
 |title= Document Object Model (DOM) Level 3 Events Specification (working draft)
 |publisher= [[W3C]]
 |access-date=2013-04-17}}</ref>
| {{No}}
|-
| rowspan=6 | [[Form (HTML)|HTML form]]
| select
| onselect
| Fires when a user selects some text in a [[Text box|text field]], including input and textarea
| {{Yes}}
| {{No}}
|-
| change
| onchange
| Fires when a control loses the input [[Focus (computing)|focus]] and its value has been modified since gaining focus
| {{Yes}}
| {{No}}
|-
| submit
| onsubmit
| Fires when a form is submitted
| {{Yes}}
| {{Yes}}
|-
| reset
| onreset
| Fires when a form is reset
| {{Yes}}
| {{No}}
|-
| focus
| onfocus
| Fires when an element receives focus either via the pointing device or by [[Tab order|tab navigation]]
| {{No}}
| {{No}}
|-
| blur
| onblur
| Fires when an element loses focus either via the pointing device or by [[tabbing navigation]]
| {{No}}
| {{No}}
|-
| rowspan=3 | User interface
| focusin
| {{CNone|(none)}}
| Similar to HTML focus event, but can be applied to any focusable element
| {{Yes}}
| {{No}}
|-
| focusout
| {{CNone|(none)}}
| Similar to HTML blur event, but can be applied to any focusable element
| {{Yes}}
| {{No}}
|-
| DOMActivate
| {{CNone|(none)}}
| Similar to XUL command event. Fires when an element is activated, for instance, through a mouse click or a keypress.
| {{Yes}}
| {{Yes}}
|-
| rowspan=7 | Mutation
| DOMSubtreeModified
| {{CNone|(none)}}
| Fires when the subtree is modified
| {{Yes}}
| {{No}}
|-
| DOMNodeInserted
| {{CNone|(none)}}
| Fires when a node has been added as a child of another node
| {{Yes}}
| {{No}}
|-
| DOMNodeRemoved
| {{CNone|(none)}}
| Fires when a node has been removed from a DOM-tree
| {{Yes}}
| {{No}}
|-
| DOMNodeRemovedFromDocument
| {{CNone|(none)}}
| Fires when a node is being removed from a document
| {{No}}
| {{No}}
|-
| DOMNodeInsertedIntoDocument
| {{CNone|(none)}}
| Fires when a node is being inserted into a document
| {{No}}
| {{No}}
|-
| DOMAttrModified
| {{CNone|(none)}}
| Fires when an attribute has been modified
| {{Yes}}
| {{No}}
|-
| DOMCharacterDataModified
| {{CNone|(none)}}
| Fires when the character data has been modified
| {{Yes}}
| {{No}}
|-
| rowspan=6 | Progress
| loadstart
| {{CNone|(none)}}
| Progress has begun.
| {{No}}
| {{No}}
|-
| progress
| {{CNone|(none)}}
| In progress. After loadstart has been dispatched.
| {{No}}
| {{No}}
|-
| error
| {{CNone|(none)}}
| Progression failed. After the last progress has been dispatched, or after loadstart has been dispatched if progress has not been dispatched.
| {{No}}
| {{No}}
|-
| abort
| {{CNone|(none)}}
| Progression is terminated. After the last progress has been dispatched, or after loadstart has been dispatched if progress has not been dispatched.
| {{No}}
| {{No}}
|-
| load
| {{CNone|(none)}}
| Progression is successful. After the last progress has been dispatched, or after loadstart has been dispatched if progress has not been dispatched.
| {{No}}
| {{No}}
|-
| loadend
| {{CNone|(none)}}
| Progress has stopped. After one of error, abort, or load has been dispatched.
| {{No}}
| {{No}}
|-
|}

Note that the events whose names start with "DOM" are currently not well supported, and for this and other performance reasons are deprecated by the W3C in DOM Level 3. [[Mozilla]] and [[Opera (web browser)|Opera]] support ''DOMAttrModified'', ''DOMNodeInserted'', ''DOMNodeRemoved'' and ''DOMCharacterDataModified''. [[Google Chrome|Chrome]] and [[Safari (web browser)|Safari]] support these events, except for ''DOMAttrModified''.