JavaScript Tutorial

JS HomeJS EditorsJS How toJS Basic ProgramJS ConsoleJS VariableJS constJS Data TypesJS StringJS Type CastingJS KeywordsJS OperatorsJS Use StrictJS Escape SequencesJS Comments

JS Control Statements

JS ifJS if elseJS else ifJS BreakJS ContinueJS Switch Case

JS Looping

JS Loop ForJS Loop For InJS Loop WhileJS Loop Do While

JS Array

JS ArrayJS Array One DimensionalJS Array Multi DimensionalJS Array Associative

JS Functions

JS FunctionJS Function SelfJS Function call()JS Function apply()JS Call By ValueJS Call By ReferenceJS Function Closures

JS Scope

JS Scope GlobalJS Scope LocalJS Let

JS File Handling

JS File Handling

JS Error Handling

JS try catchJS throwJS finally

JS Select Particulars

JS getElementByID()JS getElementsByClassName()JS getElementsByTagName()JS getElementsByName()JS querySelector()JS querySelectorAll()

JS Popup

JS alert()JS confirm()JS prompt()

JS Events

JS EventsJS Media EventsJS Mouse EventsJS Keyboard EventsJS Form EventsJS Drag EventsJS Clipboard EventsJS Print EventsJS Animation EventsJS Transition EventsJS Server-Sent EventsJS Touch EventsJS Object Events

JS Methods

JS Array MethodsJS String MethodsJS Math MethodsJS Number MethodsJS Date MethodsJS Element MethodsJS Window MethodsJS Node MethodsJS Document MethodsJS Console MethodsJS Timing MethodsJS Navigator MethodsJS Miscellaneous Methods

JS Properties

JS Array PropertiesJS String PropertiesJS Number PropertiesJS MouseEvent PropertiesJS KeyboardEvent PropertiesJS AnimationEvent PropertiesJS TransitionEvent PropertiesJS Element PropertiesJS Window PropertiesJS Node PropertiesJS Document PropertiesJS Navigator PropertiesJS HashChangeEvent PropertiesJS Miscellaneous Properties

JS Regular Expressions

JS Regexp

JS Cookies

JS Cookies

JS Interview Programs

JS Common ProgramsJS Array ProgramsJS Converter ProgramsJS Star Patterns ProgramJS Number Patterns ProgramJS Alphabet Patterns Program

JS Reference

LEARN JSONLEARN AJAXJS KeycodeMIME TypesASCII Table

JavaScript Events

Last Updated:

JavaScript Events

In JavaScript, an event is something that-happen in the system. For example, user clicks an element (button, link, etc.) is an event, page load is an event, hovering an element is an event, and so.

In this section, we will list all the events available in JavaScript.

Mouse Events

The following table provides a list of all Mouse Events available in JavaScript.

EventExplanation
onclick Triggers when the user clicks on an element
oncontextmenu Triggers when the user right-clicks on an element to open a context menu
ondblclick Triggers when the user double-clicks on an element
onmousedown Triggers when the user presses a mouse button over an element
onmouseenter Triggers when the pointer is moved onto an element
onmouseleave Triggers when the pointer is moved out of an element
onmousemove Triggers when the pointer is moving while it is over an element
onmouseover Triggers when the pointer is moved onto an element, or onto one of its children
onmouseout Triggers when a user moves the mouse pointer out of an element, or out of one of its children
onmouseup Triggers when a user releases a mouse button over an element
onwheel Triggers when a user wheel/scroll a mouse

Mouse Events Properties

The following table provides a list of all Mouse Events properties available in JavaScript.

PropertyExplanation
event.altKey Returns whether the "ALT" key was pressed when the mouse event was fired
event.button Returns which mouse button was pressed when the mouse event was fired
event.buttons Returns which mouse buttons were pressed when the mouse event was fired
event.clientX Returns the X coordinate of the mouse pointer relative to the current window, when the mouse event was fired
event.clientY Returns the Y coordinate of the mouse pointer relative to the current window, when the mouse event was fired
event.ctrlKey Returns whether the "CTRL" key was pressed when the mouse event was fired
event.detail Returns a number with details about the event
event.metaKey Returns whether the "META" key was pressed when the mouse event was fired
event.movementX Returns the X coordinate of the mouse pointer relative to the position of the last mousemove event
event.movementY Returns the Y coordinate of the mouse pointer relative to the position of the last mousemove event
event.offsetX Returns the X coordinate of the mouse pointer relative to the position of the padding edge of the target node
event.offsetY Returns the Y coordinate of the mouse pointer relative to the position of the padding edge of the target node
event.pageX Returns the X coordinate of the mouse pointer relative to the whole document
event.pageY Returns Y coordinate of the mouse pointer relative to the whole document
event.region Returns the id of the hit region affected by the event. If no hit region is affected, null is returned
event.relatedTarget Returns the secondary target for the event, if there is one.
event.screenX Returns the X coordinate of the mouse pointer relative to the screen.
event.screenY Returns the Y coordinate of the mouse pointer relative to the screen.
event.shiftKey Returns whether the "SHIFT" key was pressed when the mouse event was fired

Keyboard Events

The following table provides a list of all Keyboard Events available in JavaScript.

EventExplanation
onkeydown Triggers when the user is pressing a key
onkeypress Triggers when the user presses a key
onkeyup Triggers when the user releases a key

Keyboard Events Properties

The following table provides a list of all Keyboard Events properties available in JavaScript.

PropertiesExplanation
event.altKey Returns whether the "ALT" key was pressed when the key event was fired
event.code Returns a DOMString with the code value of the physical key represented by the event
event.ctrlKey Returns whether the "CTRL" key was pressed when the key event was fired
event.isComposing Returns whether the event is fired between after compositionstart and before compositionend.
event.key Returns a DOMString representing the key value of the key represented by the event
event.location Returns a Number representing the location of the key on the keyboard or other input device
event.metaKey Returns whether the "META" key was pressed when the key event was fired
event.repeat Returns whether a key is being hold down repeatedly or not
event.shiftKey Returns whether the "SHIFT" key was pressed when the key event was fired

Object/Frame Events

The following table provides a list of all Object/Frame Events available in JavaScript.

EventExplanation
onabort Triggers when the loading of a media is aborted
onbeforeunload Triggers before the document is about to be unloaded
onerror Triggers when an error occurs while loading an external file
onfullscreenchange Triggers when an element is displayed in fullscreen mode
onfullscreenerror Triggers when an element can not be displayed in fullscreen mode
onhashchange Triggers when there has been changes to the anchor part of a URL
onload Triggers when an object has loaded
onpageshow Triggers when the user navigates away from a webpage
onpagehide Triggers when the user navigates to a webpage
onresize Triggers when the document view is resized
onscroll Triggers when an element's scrollbar is being scrolled
onunload Triggers once a page has unloaded

Form Events

The following table provides a list of all Form Events available in JavaScript.

EventExplanation
onblur Triggers when an element loses focus
onchange Triggers when the content of a form element, the selection, or the checked state have changed (for <input>, <select>, and <textarea>)
onfocus Triggers when an element gets focus
onfocusin Triggers when an element is about to get focus
onfocusout Triggers when an element is about to lose focus
oninput Triggers when an element gets user input
oninvalid Triggers when an element is invalid
onreset Triggers when a form is reset
onsearch Triggers when the user writes something in a search field (for <input="search">)
onselect Triggers after the user selects some text (for <input> and <textarea>)
onsubmit Triggers when a form is submitted

Drag Events

The following table provides a list of all Drag Events available in JavaScript.

EventExplanation
ondrag Triggers when an element is being dragged
ondragend Triggers when the user has finished dragging an element
ondragenter Triggers when the dragged element enters the drop target
ondragleave Triggers when the dragged element leaves the drop target
ondragover Triggers when the dragged element is over the drop target
ondragstart Triggers when the user starts to drag an element
ondrop Triggers when the dragged element is dropped on the drop target

Clipboard Events

The following table provides a list of all Clipboard Events available in JavaScript.

EventExplanation
oncopy Triggers when the user copies the content of an element
oncut Triggers when the user cuts the content of an element
onpaste Triggers when the user pastes some content in an element

Print Events

The following table provides a list of all Print Events available in JavaScript.

EventExplanation
onafterprint Triggers when a page has started printing, or if the print dialogue box has been closed
onbeforeprint Triggers when a page is about to be printed

Animation Events

The following table provides a list of all Animation Events available in JavaScript.

EventExplanation
onanimationstart Triggers when a CSS animation has started
onanimationend Triggers when a CSS animation has completed
onanimationiteration Triggers when a CSS animation is repeated

Animation Events Properties

The following table provides a list of all Mouse Events properties available in JavaScript.

PropertyExplanation
event.animationName Returns the name of the animation
event.elapsedTime Returns the number of seconds an animation has been running

Media Events

The following table provides a list of all Media Events available in JavaScript.

EventExplanation
onabort Triggers when the loading of an audio/video is aborted
oncanplay Triggers when the browser can start playing the audio/video
oncanplaythrough Triggers when the browser can play through the audio/video without stopping for buffering
ondurationchange Triggers when the duration of the audio/video is changed
onemptied Triggers when the current playlist is empty
onended Triggers when the current playlist is ended
onerror Triggers when an error occurred during the loading of an audio/video
onloadeddata Triggers when the browser has loaded the current frame of the audio/video
onloadedmetadata Triggers when the browser has loaded meta data for the audio/video
onloadstart Triggers when the browser starts looking for the audio/video
onpause Triggers when the audio/video has been paused
onplay Triggers when the audio/video has been started or is no longer paused
onplaying Triggers when the audio/video is playing after having been paused or stopped for buffering
onprogress Triggers when the browser is downloading the audio/video
onratechange Triggers when the playing speed of the audio/video is changed
onseeked Triggers when a seek operation completed
onseeking Triggers when a seek operation begins
onstalled Triggers when the user agent is trying to fetch media data, but data is unexpectedly not forthcoming
onsuspend Triggers when the media data loading has been suspended
ontimeupdate Triggers when the time indicated by the currentTime attribute has been updated
onvolumechange Triggers when the volume has been changed
onwaiting Triggers when the video stops because it needs to buffer the next frame

Transition Events

The following table provides a list of all Transition Events available in JavaScript.

EventExplanation
ontransitionend Triggers when a CSS transition has completed

Transition Events Properties

The following table provides a list of all Transition Events properties available in JavaScript.

PropertyExplanation
event.persisted Returns whether the webpage was cached by the browser

Server Sent Events

The following table provides a list of all Server Sent Events available in JavaScript.

EventExplanation
onmessage Triggers when a message is received through the event source
onopen Triggers when a connection with the event source is opened
onerror Triggers when an error occurs while loading an external file

Touch Events

The following table provides a list of all Touch Events available in JavaScript.

EventExplanation
ontouchcancel Triggers when the touch is interrupted
ontouchend Triggers when a finger is removed from a touch screen
ontouchmove Triggers when a finger is dragged across the screen
ontouchstart Triggers when a finger is placed on a touch screen

HashChangeEvent Properties

The following table provides a list of all HashChange Event properties available in JavaScript.

PropertyExplanation
event.newURL Returns the new URL to which the window is navigating
event.oldURL Returns the previous URL from which the window was navigated

Share this Page

Meet the Author