Tutorials References Menu

JS Reference

JS by Category JS by Alphabet

JavaScript

JS Array JS Boolean JS Classes JS Date JS Error JS Global JS JSON JS Math JS Number JS Operators JS RegExp JS Statements JS String

HTML DOM

DOM Attributes DOM Document DOM Element DOM Events DOM Event Objects DOM HTMLCollection DOM Location DOM Navigator DOM Screen DOM Style
alignContent alignItems alignSelf animation animationDelay animationDirection animationDuration animationFillMode animationIterationCount animationName animationTimingFunction animationPlayState background backgroundAttachment backgroundColor backgroundImage backgroundPosition backgroundRepeat backgroundClip backgroundOrigin backgroundSize backfaceVisibility border borderBottom borderBottomColor borderBottomLeftRadius borderBottomRightRadius borderBottomStyle borderBottomWidth borderCollapse borderColor borderImage borderImageOutset borderImageRepeat borderImageSlice borderImageSource borderImageWidth borderLeft borderLeftColor borderLeftStyle borderLeftWidth borderRadius borderRight borderRightColor borderRightStyle borderRightWidth borderSpacing borderStyle borderTop borderTopColor borderTopLeftRadius borderTopRightRadius borderTopStyle borderTopWidth borderWidth bottom boxShadow boxSizing captionSide caretColor clear clip color columnCount columnFill columnGap columnRule columnRuleColor columnRuleStyle columnRuleWidth columns columnSpan columnWidth counterIncrement counterReset cursor direction display emptyCells filter flex flexBasis flexDirection flexFlow flexGrow flexShrink flexWrap cssFloat font fontFamily fontSize fontStyle fontVariant fontWeight fontSizeAdjust height isolation justifyContent left letterSpacing lineHeight listStyle listStyleImage listStylePosition listStyleType margin marginBottom marginLeft marginRight marginTop maxHeight maxWidth minHeight minWidth objectFit objectPosition opacity order orphans outline outlineColor outlineOffset outlineStyle outlineWidth overflow overflowX overflowY padding paddingBottom paddingLeft paddingRight paddingTop pageBreakAfter pageBreakBefore pageBreakInside perspective perspectiveOrigin position quotes resize right scrollBehavior tableLayout tabSize textAlign textAlignLast textDecoration textDecorationColor textDecorationLine textDecorationStyle textIndent textOverflow textShadow textTransform top transform transformOrigin transformStyle transition transitionProperty transitionDuration transitionTimingFunction transitionDelay unicodeBidi userSelect verticalAlign visibility width wordBreak wordSpacing wordWrap widows zIndex
DOM Window

Web APIs

API Console API Geolocation API History API Storage

HTML Objects

<a> <abbr> <address> <area> <article> <aside> <audio> <b> <base> <bdo> <blockquote> <body> <br> <button> <canvas> <caption> <cite> <code> <col> <colgroup> <datalist> <dd> <del> <details> <dfn> <dialog> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <footer> <form> <head> <header> <h1> - <h6> <hr> <html> <i> <iframe> <img> <ins> <input> button <input> checkbox <input> color <input> date <input> datetime <input> datetime-local <input> email <input> file <input> hidden <input> image <input> month <input> number <input> password <input> radio <input> range <input> reset <input> search <input> submit <input> text <input> time <input> url <input> week <kbd> <label> <legend> <li> <link> <map> <mark> <menu> <menuitem> <meta> <meter> <nav> <object> <ol> <optgroup> <option> <output> <p> <param> <pre> <progress> <q> <s> <samp> <script> <section> <select> <small> <source> <span> <strong> <style> <sub> <summary> <sup> <table> <tbody> <td> <tfoot> <th> <thead> <tr> <textarea> <time> <title> <track> <u> <ul> <var> <video>

Other References

CSSStyleDeclaration JS Conversion


The Event Object

❮ DOM Events ❮ Event Objects


Event Object

All event objects in the DOM are based on the Event Object.

Therefore, all other event objects (like MouseEvent and KeyboardEvent) has access to the Event Object's properties and methods.


Event Properties and Methods

Property/Method Description
bubbles Returns whether or not a specific event is a bubbling event
cancelBubble Sets or returns whether the event should propagate up the hierarchy or not
cancelable Returns whether or not an event can have its default action prevented
composed Returns whether the event is composed or not
createEvent() Creates a new event
composedPath() Returns the event's path
currentTarget Returns the element whose event listeners triggered the event
defaultPrevented Returns whether or not the preventDefault() method was called for the event
eventPhase Returns which phase of the event flow is currently being evaluated
isTrusted Returns whether or not an event is trusted
preventDefault() Cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur
stopImmediatePropagation() Prevents other listeners of the same event from being called
stopPropagation() Prevents further propagation of an event during event flow
target Returns the element that triggered the event
timeStamp Returns the time (in milliseconds relative to the epoch) at which the event was created
type Returns the name of the event

Event Types

These event types belongs to the Event Object:

Event Description
abort The event occurs when the loading of a media is aborted
afterprint The event occurs when a page has started printing
beforeprint The event occurs when a page is about to be printed
beforeunload The event occurs before the document is about to be unloaded
canplay The event occurs when the browser can start playing the media (when it has buffered enough to begin)
canplaythrough The event occurs when the browser can play through the media without stopping for buffering
change The event occurs when the content of a form element, the selection, or the checked state have changed (for <input>, <select>, and <textarea>)
error The event occurs when an error occurs while loading an external file
fullscreenchange The event occurs when an element is displayed in fullscreen mode
fullscreenerror The event occurs when an element can not be displayed in fullscreen mode
input The event occurs when an element gets user input
invalid The event occurs when an element is invalid
load The event occurs when an object has loaded
loadeddata The event occurs when media data is loaded
loadedmetadata The event occurs when meta data (like dimensions and duration) are loaded
message The event occurs when a message is received through the event source
offline The event occurs when the browser starts to work offline
online The event occurs when the browser starts to work online
open The event occurs when a connection with the event source is opened
pause The event occurs when the media is paused either by the user or programmatically
play The event occurs when the media has been started or is no longer paused
playing The event occurs when the media is playing after having been paused or stopped for buffering
progress The event occurs when the browser is in the process of getting the media data (downloading the media)
ratechange The event occurs when the playing speed of the media is changed
resize The event occurs when the document view is resized
reset The event occurs when a form is reset
scroll The event occurs when an element's scrollbar is being scrolled
search The event occurs when the user writes something in a search field (for <input="search">)
seeked The event occurs when the user is finished moving/skipping to a new position in the media
seeking The event occurs when the user starts moving/skipping to a new position in the media
select The event occurs after the user selects some text (for <input> and <textarea>)
show The event occurs when a <menu> element is shown as a context menu
stalled The event occurs when the browser is trying to get media data, but data is not available
submit The event occurs when a form is submitted
suspend The event occurs when the browser is intentionally not getting media data
timeupdate The event occurs when the playing position has changed (like when the user fast forwards to a different point in the media)
toggle The event occurs when the user opens or closes the <details> element
unload The event occurs once a page has unloaded (for <body>)
waiting The event occurs when the media has paused but is expected to resume (like when the media pauses to buffer more data)

❮ DOM Events ❮ Event Objects