JavaScript Events

Things that can happen to HTML components and are executed by the user in JavaScript
are called events. These events can be detected by the programming language, which can
then be used to activate code actions. Without them, no JavaScript cheat sheet would be
complete. Let us take a look at some of the events supported by JavaScript:
• Mouse Events:
o onclick – When a user clicks on an element, an event is triggered.
o oncontextmenu — When a user right-clicks on an element, a context menu
appears.
o ondblclick — When a user double-clicks on an element, it is called
ondblclick.
o onmousedown — When a user moves their mouse over an element, it is
called onmousedown.
o onmouseenter — The mouse pointer is moved to a certain element.
o onmouseleave — The pointer leaves an element.
o onmousemove — When the pointer is over an element, it moves.
o onmouseover — When the cursor is moved onto an element or one of its
descendants, the term onmouseover is used.
o onmouseout — When the user moves the mouse cursor away from an
element or one of its descendants, it is called onmouseout.
o onmouseup — When a user releases a mouse button while hovering over an
element, it is known as onmouseup.
• Form Events:
o onblur — When an element loses focus, it is called onblur.
o onchange — A form element's content changes. (for the input>, select>, and
textarea> elements)
o onfocus – An aspect is brought into focus.
o onfocusin — When an element is ready to become the centre of attention.
o onfocusout —The element is about to lose focus.
o oninput — When a user inputs something into an element, it's called
oninput.
o oninvalid — If an element isn't valid, it's called oninvalid.
o onreset — The state of a form is reset.
o onsearch — A user enters text into a search field (for input="search">).
o onselect — The user chooses some text (input> and textarea>).
o onsubmit — A form is filled out and submitted.
• Drag Events:
o ondrag — When an element is dragged, it is called ondrag.
o ondragend — The element has been dragged to its final position.
o ondragenter — When a dragged element enters a drop target, it is called
ondragenter.
o ondragleave — When a dragged element departs the drop target, it is called
ondragleave.
o ondragover — The dropped element is on top of the dragged element.
 o ondragstart — The user begins dragging an element.
o ondrop — When a dragged element is dropped on a drop target, it is called
ondrop.
• Keyboard Events:
o onkeydown — When the user presses a key down
o onkeypress — When the user begins to press a key.
o onkeyup — A key is released by the user.
• Frame Events:
o onabort — The loading of a media is aborted with onabort.
o onerror — When loading an external file, an error occurs.
o onpagehide – When a user leaves a webpage, it is called onpagehide.
o onpageshow — When the user navigates to a webpage
o onhashchange — The anchor component of a URL has been changed.
o onload — When an object has loaded
o onresize — The document view gets resized when onresize is called.
o onscroll — The scrollbar of an element is being scrolled.onbeforeunload —
Before the document is due to be emptied, an event occurs.
o onunload — When a page is emptied, this event occurs.
• Animation Events:
o animationstart — The animation in CSS has begun.
o animationend — When a CSS animation is finished, it is called
animationend.
o animationiteration — CSS animation is repeated using animationiteration.
• Clipboard Events:
o oncut — The content of an element is cut by the user.
o onpaste — When a user pastes material into an element, it is called onpaste.
o oncopy — The content of an element is copied by the user.
• Media Events:
o onloadeddata — Media data has been loaded
o onloadedmetadata — Metadata is loaded (such as size and duration).
o onloadstart — The browser begins looking for the media that has been
specified.
o onabort — The loading of media has been halted.
o onerror — When an error occurs while loading an external file, the event
onerror is triggered.
o onpause — Media is paused, either manually or automatically, by the user.
o onplay — The video or audio has begun or is no longer paused.
o onstalled — The browser is attempting to load the media, but it is not
currently accessible.
o oncanplay — The browser has the ability to begin playing media (e.g. a file
has buUered enough)
o oncanplaythrough — The browser is capable of playing media without
pausing.
o ondurationchange — The media's duration changes.
 o onended — The media's time has come to an end.
o onsuspend — The browser is not loading media on purpose.
o ontimeupdate — The situation has shifted (e.g. because of fast forward)
o onvolumechange — The volume of the media has changed (including mute)
o onwaiting — The media has taken a break, but it is anticipated to resume
soon (for example, buUering)
o onplaying — Media that has been paused or halted for buUering is now
playing.
o onprogress — The media is being downloaded by the browser.
o onratechange — The media's playback speed changes.
o onseeking — The user begins to move/skip.
• Miscellaneous Events:
o transitionend — When a CSS transition is complete, this event is triggered.
o onmessage — The event source has received a message.
o onpopstate — When the history of the window changes
o onshow — A <menu> element is shown as a context menu when it is
onshow.
o onoDline — The browser switches to oUline mode.
o ononline — The browser enters the online mode.
o ontouchcancel — The user's ability to touch the screen has been halted.
o ontouchstart — The touch-screen is activated by placing a finger on it.
o onstorage — An part of Web Storage has been upgraded.
o ontoggle — The user toggles the details> element open or closed.
o onwheel — The mouse wheel moves up and down when it passes over an
element.
o ontouchend — A touch-screen user's finger is withdrawn.
o ontouchmove — When a finger is dragged over the screen, it is called
ontouchmove.