Browser Events#

Common browser events and DOM events, including mouse events, keyboard events, frame/object events, form events, clipboard events, print events, drag events, multimedia events, animation events, and transition events.

Browser Events#

Loading Related#

• onbeforeunload: Triggered when the page is about to leave (refresh or close).
• onload: Triggered after the document has finished loading.
• onunload: Triggered when the window unloads its content and resources.
• onerror: Triggered when a JavaScript runtime error or resource loading failure occurs.
• onabort: Event handler for the abort event sent to the window, not applicable to Firefox 2 or Safari.

Window Related#

• onblur: Triggered when the window loses focus.
• onfocus: Triggered when the window gains focus.
• onresize: Triggered when the window size changes.
• onscroll: Triggered when the window is scrolled.
• onmessage: Triggered when the window object receives a message.
• onchange: Triggered when the content of form elements within the window changes.
• oninput: Triggered when form elements within the window receive user input.
• onreset: Triggered when forms within the window are reset.
• onselect: Triggered when text in form elements within the window is selected.
• onsubmit: Triggered when the submit button in the form within the window is pressed.
• onhashchange: Triggered when the anchor hash value of the window changes.

Mouse Related#

• onclick: Triggered when the page is clicked.
• onmouseup: Triggered when the mouse button is released.
• ondblclick: Triggered when the page is double clicked.
• oncontextmenu: Triggered when the right mouse button is clicked to open the context menu.
• onmousedown: Triggered when the mouse button is pressed.
• onmousemove: Triggered when the mouse is moved.
• onmouseout: Triggered when the mouse moves out of the window.
• onmouseover: Triggered when the mouse moves over the window.
• onauxclick: Indicates triggering when a non-primary button is pressed on an input device, such as the middle button on a mouse.

Keyboard Related#

• onkeydown: Triggered when a keyboard key is pressed.
• onkeyup: Triggered when a keyboard key is released.
• onkeypress: Triggered when a keyboard key is pressed and released.

Animation Related#

• onanimationcancel: Triggered when a CSS animation is unexpectedly terminated, i.e., when it stops running at any time without sending the animationend event, such as when the animation-name is changed or the animation is deleted, etc.
• onanimationend: Triggered when a CSS animation reaches the end of its active period, calculated according to (animation-duration*animation-iteration-count) + animation-delay.
• onanimationiteration: This event is triggered when a CSS animation reaches the end of each iteration, completing a single pass of an animation instruction sequence by executing the last animation step.

Device Related#

• ondevicemotion: Triggered when the device's orientation changes.
• ondeviceorientation: Triggered when the device's relative orientation changes.
• ondeviceproximity: Triggered when the device sensor detects an object getting closer to or farther away from the device.

Print Related#

• onbeforeprint: Triggered when the page is about to start printing.
• onafterprint: Triggered when the page has started printing or the print window has been closed.

Application Related#

• onappinstalled: This event is dispatched once a web application has been successfully installed as a Progressive Web App.
• onbeforeinstallprompt: When the user is about to be prompted to install a web application, this handler will be scheduled on the device and its associated events can be saved for later use to prompt the user at a more appropriate time.

DOM Events#

Mouse Events#

• onclick: Event handler called when the user clicks on an object.
• oncontextmenu: Triggered when the user right-clicks to open the context menu.
• ondblclick: Event handler called when the user double-clicks on an object.
• onmousedown: Mouse button is pressed down.
• onmouseenter: Triggered when the mouse pointer moves onto an element.
• onmouseleave: Triggered when the mouse pointer moves out of an element.
• onmousemove: Mouse is moved.
• onmouseover: Mouse moves over an element.
• onmouseout: Mouse moves out of an element.
• onmouseup: Mouse button is released.
• onwheel: Triggered when the mouse wheel is scrolled up or down over an element.

Keyboard Events#

• onkeydown: A keyboard key is pressed down.
• onkeypress: A keyboard key is pressed and released.
• onkeyup: A keyboard key is released.

Frame/Image Events#

• onabort: Image loading is aborted.
• onbeforeunload: Triggered when the user is about to leave the page (refresh or close).
• onerror: Error occurs while loading a document or image.
• onhashchange: Triggered when the anchor part of the current URL changes.
• onload: A page or image finishes loading.
• onpageshow: Triggered when the user visits a page.
• onpagehide: Triggered when the user leaves the current page to go to another page.
• onresize: Window or frame is resized.
• onscroll: Event occurs when the document is scrolled.
• onunload: User exits the page.
• visibilitychange: Document listening event, triggered when the browser tab is hidden or shown.
• onmessage: Triggered when a message is received from WebSocket, Web Worker, Event Source, iframe, or parent window.
• ononline: Triggered when the browser starts working online.
• onoffline: Triggered when the browser starts working offline.
• onshow: Triggered when the element is displayed in the context menu.
• ontoggle: Triggered when the user opens or closes the element.

Form-Related Events#

• onblur: Triggered when an element loses focus.
• onchange: Triggered when the content of a form element changes.
• onfocus: Triggered when an element gains focus.
• onfocusin: Triggered when an element is about to gain focus.
• onfocusout: Triggered when an element is about to lose focus.
• oninput: Triggered when an element receives user input.
• onreset: Triggered when a form is reset.
• onsearch: Triggered when the user inputs text into a search field.
• onselect: Triggered when the user selects text in an input field.
• onsubmit: Triggered when a form is submitted.

Clipboard Events#

• oncopy: Triggered when the user copies the content of an element.
• oncut: Triggered when the user cuts the content of an element.
• onpaste: Triggered when the user pastes the content into an element.

Print Events#

• onafterprint: Triggered when the page has started printing or the print window has been closed.
• onbeforeprint: Triggered when the page is about to start printing.

Drag Events#

• ondrag: Triggered when an element is being dragged.
• ondragend: Triggered when the user completes dragging an element.
• ondragenter: Triggered when the dragged element enters the drop target.
• ondragleave: Triggered when the dragged element leaves the drop target.
• ondragover: Triggered when the dragged element is over the drop target.
• ondragstart: Triggered when the user starts dragging an element.
• ondrop: Triggered when the dragged element is dropped onto the target area.

Multimedia Related#

onabort: This event is triggered when a video/audio stops loading.
oncanplay: This event is triggered when the user can start playing the video/audio.
oncanplaythrough: This event is triggered when the video/audio can be played smoothly without pausing or buffering.
ondurationchange: This event is triggered when the duration of the video/audio changes.
onemptied: This event is triggered when the current playlist is empty.
onended: This event is triggered when the video/audio finishes playing.
onerror: This event is triggered when an error occurs during the loading of video/audio data.
onloadeddata: This event is triggered when the browser loads the current frame of the video/audio.
onloadedmetadata: This event is triggered after the metadata of the specified video/audio is loaded.
onloadstart: This event is triggered when the browser starts looking for the specified video/audio.
onpause: This event is triggered when the video/audio is paused.
onplay: This event is triggered when the video/audio starts playing.
onplaying: This event is triggered when the video/audio is paused or is ready to resume playing after buffering.
onprogress: This event is triggered when the browser downloads the specified video/audio.
onratechange: This event is triggered when the playback speed of the video/audio changes.
onseeked: This event is triggered after the user repositions the playback position of the video/audio.
onseeking: This event is triggered when the user starts repositioning the video/audio.
onstalled: This event is triggered when the browser retrieves media data but the media data is not available.
onsuspend: This event is triggered when the browser stops reading media data.
ontimeupdate: This event is triggered when the current playback position changes.
onvolumechange: This event is triggered when the volume changes.
onwaiting: This event is triggered when the video needs to buffer to play the next frame.

Animation Related#

animationend: This event is triggered when a CSS animation finishes playing.
animationiteration: This event is triggered when a CSS animation repeats.
animationstart: This event is triggered when a CSS animation starts playing.

Transition Related#

transitionend: This event is triggered after a CSS transition completes.

Every Day One Question#

Reference#