W3Schools.com

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 or holding down a key 2
keypress onkeypress The event occurs when the user is pressing a key or holding down a key 2
keyup onkeyup The event occurs when a keyboard key is released 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 when a document is removed from a window or frame (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

W3Schools Certification

W3Schools' Online Certification

The perfect solution for professionals who need to balance work, family, and career building.

More than 10 000 certificates already issued!

Get Your Certificate »

The HTML Certificate documents your knowledge of HTML.

The CSS Certificate documents your knowledge of advanced CSS.

The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM.

The jQuery Certificate documents your knowledge of jQuery.

The XML Certificate documents your knowledge of XML, XML DOM and XSLT.

The ASP Certificate documents your knowledge of ASP, SQL, and ADO.

The PHP Certificate documents your knowledge of PHP and SQL (MySQL).

WEB HOSTING
Best Web Hosting
PHP MySQL Hosting
Best Hosting Coupons
UK Reseller Hosting
Cloud Hosting
Top Web Hosting
$3.98 Unlimited Hosting
Premium Website Design
WEB BUILDING
Download XML Editor
FREE Website BUILDER
Best Website Templates Top CSS Templates
CREATE HTML Websites
EASY WEBSITE BUILDER
W3SCHOOLS EXAMS
Get Certified in:
HTML, CSS, JavaScript, XML, PHP, and ASP
W3SCHOOLS BOOKS
New Books:
HTML, CSS
JavaScript, and Ajax
STATISTICS
Browser Statistics
Browser OS
Browser Display
SHARE THIS PAGE