HTML DOM Events
HTML DOM Events
HTML DOM events allow JavaScript to register different event handlers on elements in an HTML document.
Events are normally used in combination with functions, and the function will not be executed before the event occurs (such as when a user clicks a button).
Tip: The event model was standardized by the W3C in DOM Level 2.
HTML DOM Events
DOM: Indicates in which DOM Level the property was introduced.
Mouse Events
Event Attribute Description DOM click onclick The event occurs when the user clicks on an element 2 dblclick ondblclick The event occurs when the user double-clicks on an element 2 mousedown onmousedown The event occurs when a user presses a mouse button over an element 2 mousemove onmousemove The event occurs when a user moves the mouse pointer over an element 2 mouseover onmouseover The event occurs when a user mouse over an element 2 mouseout onmouseout The event occurs when a user moves the mouse pointer out of an element 2 mouseup onmouseup The event occurs when a user releases a mouse button over an element 2
Keyboard Events
Event Attribute Description DOM keydown onkeydown The event occurs when the user is pressing a key 2 keypress onkeypress The event occurs when the user presses a key 2 keyup onkeyup The event occurs when the user releases a key 2
Frame/Object Events
Event Attribute Description DOM abort onabort The event occurs when an image is stopped from loading before completely loaded (for <object>) 2 error onerror The event occurs when an image does not load properly (for <object>, <body> and <frameset>) load onload The event occurs when a document, frameset, or <object> has been loaded 2 resize onresize The event occurs when a document view is resized 2 scroll onscroll The event occurs when a document view is scrolled 2 unload onunload The event occurs once a page has unloaded (for <body> and <frameset>) 2
Form Events
Event Attribute Description DOM blur onblur The event occurs when a form element loses focus 2 change onchange The event occurs when the content of a form element, the selection, or the checked state have changed (for <input>, <select>, and <textarea>) 2 focus onfocus The event occurs when an element gets focus (for <label>, <input>, <select>, textarea>, and <button>) 2 reset onreset The event occurs when a form is reset 2 select onselect The event occurs when a user selects some text (for <input> and <textarea>) 2 submit onsubmit The event occurs when a form is submitted 2
Event Object
Constants
Constant Description DOM AT_TARGET The current event is in the target phase, i.e. it is being evaluated at the event target (1) 2 BUBBLING_PHASE The current event phase is the bubbling phase (2) 2 CAPTURING_PHASE The current event phase is the capture phase (3) 2
Properties
Property Description DOM bubbles Returns whether or not an event is a bubbling event 2 cancelable Returns whether or not an event can have its default action prevented 2 currentTarget Returns the element whose event listeners triggered the event 2 eventPhase Returns which phase of the event flow is currently being evaluated 2 target Returns the element that triggered the event 2 timeStamp Returns the time (in milliseconds relative to the epoch) at which the event was created 2 type Returns the name of the event 2
Methods
Method Description DOM initEvent() Specifies the event type, whether or not the event can bubble, whether or not the event's default action can be prevented 2 preventDefault() To cancel the event if it is cancelable, meaning that any default action normally taken by the implementation as a result of the event will not occur 2 stopPropagation() To prevent further propagation of an event during event flow 2
EventTarget Object
Methods
Method Description DOM addEventListener() Allows the registration of event listeners on the event target (IE8 = attachEvent()) 2 dispatchEvent() Allows to send the event to the subscribed event listeners (IE8 = fireEvent()) 2 removeEventListener() Allows the removal of event listeners on the event target (IE8 = detachEvent()) 2
EventListener Object
Methods
Method Description DOM handleEvent() Called whenever an event occurs of the event type for which the EventListener interface was registered 2
DocumentEvent Object
Methods
Method Description DOM createEvent() 2
MouseEvent/KeyboardEvent Object
Properties
Property Description DOM altKey Returns whether or not the "ALT" key was pressed when an event was triggered 2 button Returns which mouse button was clicked when an event was triggered 2 clientX Returns the horizontal coordinate of the mouse pointer, relative to the current window, when an event was triggered 2 clientY Returns the vertical coordinate of the mouse pointer, relative to the current window, when an event was triggered 2 ctrlKey Returns whether or not the "CTRL" key was pressed when an event was triggered 2 keyIdentifier Returns the identifier of a key 3 keyLocation Returns the location of the key on the advice 3 metaKey Returns whether or not the "meta" key was pressed when an event was triggered 2 relatedTarget Returns the element related to the element that triggered the event 2 screenX Returns the horizontal coordinate of the mouse pointer, relative to the screen, when an event was triggered 2 screenY Returns the vertical coordinate of the mouse pointer, relative to the screen, when an event was triggered 2 shiftKey Returns whether or not the "SHIFT" key was pressed when an event was triggered 2
Methods
Method Description W3C initMouseEvent() Initializes the value of a MouseEvent object 2 initKeyboardEvent() Initializes the value of a KeyboardEvent object 3