This comprehensive cheat sheet covers all JavaScript browser events, providing a quick reference for developers to handle various user interactions and browser behaviors efficiently.
From document and window events to form, keyboard, and mouse events, each entry includes a brief description and a practical code example. This guide is an essential tool for developers looking to create dynamic and responsive web applications, ensuring they can easily find and implement the right event listeners for their needs.
Document Events
emptied: Triggered when the media resource element suddenly becomes empty.
JavaScript
document.querySelector('video, audio').addEventListener('emptied', (e) => {
console.log('Media element has become empty.');
});waiting: Fired when the media has paused but is expected to resume.
JavaScript
document.querySelector("video, audio").addEventListener("waiting", (e) => {
console.log("Media is waiting for more data.");
});volumechange: Occurs when the volume changes or the mute state is changed.
JavaScript
document.querySelector("video, audio").addEventListener("volumechange", (e) => {
console.log("Volume changed or muted/unmuted. Volume:", e.target.volume);
});timeupdate: Fired when the time indicated by the currentTime attribute has been updated.
JavaScript
document.querySelector("video, audio").addEventListener("timeupdate", (e) => {
console.log("Current playback time:", e.target.currentTime);
});suspend: Triggered when media data loading is suspended.
JavaScript
document.querySelector("video, audio").addEventListener("suspend", (e) => {
console.log("Media data loading suspended.");
});stalled: Occurs when the browser is trying to fetch media data but is not receiving any.
JavaScript
document.querySelector("video, audio").addEventListener("stalled", (e) => {
console.log("Media data fetching stalled.");
});seeking: Fired when the seeking attribute is set to true.
JavaScript
document.querySelector("video, audio").addEventListener("seeking", (e) => {
console.log("Media seeking started.");
});seeked: Triggered when a seek operation ends.
JavaScript
document.querySelector("video, audio").addEventListener("seeked", (e) => {
console.log("Media seeking ended.");
});ratechange: Occurs when the playback rate changes.
JavaScript
document.querySelector('video, audio').addEventListener('ratechange', (e) => {
console.log('Playback rate changed to:', e.target.playbackRate);
});progress: Fired periodically as the browser loads the media resource.
JavaScript
document.querySelector('video, audio').addEventListener('progress', (e) => {
console.log('Media resource is being fetched.');
});playing: Triggered when playback is ready to start after being paused or delayed.
JavaScript
document.querySelector('video, audio').addEventListener('playing', (e) => {
console.log('Media playback has started.');
});play: Occurs when playback starts.
JavaScript
document.querySelector('video, audio').addEventListener('play', (e) => {
console.log('Media play event.');
});pause: Fired when playback is paused.
JavaScript
document.querySelector('video, audio').addEventListener('pause', (e) => {
console.log('Media playback paused.');
});loadstart: Triggered when the browser starts loading the media data.
JavaScript
document.querySelector('video, audio').addEventListener('loadstart', (e) => {
console.log('Media loading started.');
});loadedmetadata: Occurs when metadata (duration, dimensions) is loaded.
JavaScript
document.querySelector('video, audio').addEventListener('loadedmetadata', (e) => {
console.log('Media metadata loaded.');
});loadeddata: Fired when the browser has loaded the current frame of the media.
JavaScript
document.querySelector('video, audio').addEventListener('loadeddata', (e) => {
console.log('Media data loaded.');
});error: Triggered when an error occurs while loading or playing media.
JavaScript
document.querySelector('video, audio').addEventListener('error', (e) => {
console.error('Error occurred in media:', e);
});ended: Occurs when playback reaches the end of the media.
JavaScript
document.querySelector('video, audio').addEventListener('ended', (e) => {
console.log('Media playback ended.');
});durationchange: Fired when the duration of the media changes.
JavaScript
document.querySelector('video, audio').addEventListener('durationchange', (e) => {
console.log('Media duration changed.');
});cuechange: Triggered when the active cues in a text track have changed.
JavaScript
document.querySelector('track').addEventListener('cuechange', (e) => {
console.log('Text track cue changed.');
});change: Occurs when the value of an input or select element changes.
JavaScript
document.querySelector('input, select').addEventListener('change', (e) => {
console.log('Input value changed.');
});canplaythrough: Fired when the browser estimates it can play the media to the end without buffering.
JavaScript
document.querySelector('video, audio').addEventListener('canplaythrough', (e) => {
console.log('Media can play through without buffering.');
});canplay: Occurs when the browser can start playing the media, but it may need to stop for buffering.
JavaScript
document.querySelector('video, audio').addEventListener('canplay', (e) => {
console.log('Media can start playing.');
});abort: Triggered when media data loading is aborted.
JavaScript
document.querySelector('video, audio').addEventListener('abort', (e) => {
console.log('Media data loading aborted.');
});DOMContentLoaded: Fired when the initial HTML document has been completely loaded and parsed.
JavaScript
document.addEventListener('DOMContentLoaded', (e) => {
console.log('DOM fully loaded and parsed.');
});Window Events
unload: Occurs when the document or a child resource is being unloaded.
JavaScript
window.addEventListener('unload', (e) => {
console.log('Window is being unloaded.');
});storage: Fired when a storage area (localStorage or sessionStorage) has been changed.
JavaScript
window.addEventListener('storage', (e) => {
console.log('Storage area changed.');
});scroll: Occurs when the document view or an element has been scrolled.
JavaScript
window.addEventListener('scroll', (e) => {
console.log('Document scrolled.');
});resize: Fired when the document view has been resized.
JavaScript
window.addEventListener('resize', (e) => {
console.log('Window resized.');
});popstate: Triggered when the active history entry changes.
JavaScript
window.addEventListener('popstate', (e) => {
console.log('History entry changed.');
});pageshow: Occurs when the page is shown (also when it is restored from the cache).
JavaScript
window.addEventListener('pageshow', (e) => {
console.log('Page is now visible.');
});pagehide: Fired when the page is hidden (also when it is being unloaded).
JavaScript
window.addEventListener('pagehide', (e) => {
console.log('Page is now hidden.');
});online: Triggered when the browser goes online.
JavaScript
window.addEventListener('online', (e) => {
console.log('Browser is online.');
});offline: Fired when the browser goes offline.
JavaScript
window.addEventListener('offline', (e) => {
console.log('Browser is offline.');
});message: Occurs when a message is received through an object like a WebSocket or a Worker.
JavaScript
window.addEventListener('message', (e) => {
console.log('Message received:', e.data);
});load: Fired when the entire page has loaded, including all dependent resources.
JavaScript
window.addEventListener('load', (e) => {
console.log('Page fully loaded.');
});hashchange: Triggered when the fragment identifier of the URL has changed.
JavaScript
window.addEventListener('hashchange', (e) => {
console.log('URL hash changed.');
});error: Fired when an error occurs in the document.
JavaScript
window.addEventListener('error', (e) => {
console.error('Error occurred:', e);
});- beforeunload: Fired when the window, the document, and its resources are about to be unloaded.
JavaScript
window.addEventListener('beforeunload', (e) => {
console.log('Window is about to be unloaded.');
});beforeprint: Fired when the print dialogue is opened.
JavaScript
window.addEventListener('beforeprint', (e) => {
console.log('Print dialogue is about to be opened.');
});afterprint: Fired after the print dialogue is closed.
JavaScript
window.addEventListener('afterprint', (e) => {
console.log('Print dialogue has been closed.');
});Form Events
submit: Fired when a form is submitted.
JavaScript
document.querySelector('form').addEventListener('submit', (e) => {
console.log('Form submitted.');
});select: Fired when some text is being selected.
JavaScript
document.querySelector('input, textarea').addEventListener('select', (e) => {
console.log('Text selected.');
});reset: Fired when a form is reset.
JavaScript
document.querySelector('form').addEventListener('reset', (e) => {
console.log('Form reset.');
});invalid: Fired when a form element fails to validate.
JavaScript
document.querySelector('input').addEventListener('invalid', (e) => {
console.log('Form element is invalid.');
});input: Fired when an input element gets user input.
JavaScript
document.querySelector('input').addEventListener('input', (e) => {
console.log('User input detected.');
});focus: Fired when an element receives focus.
JavaScript
document.querySelector('input').addEventListener('focus', (e) => {
console.log('Element focused.');
});change: Occurs when the value of an input or select element changes.
JavaScript
document.querySelector('input, select').addEventListener('change', (e) => {
console.log('Input value changed.');
});blur: Fired when an element loses focus.
JavaScript
document.querySelector('input').addEventListener('blur', (e) => {
console.log('Element lost focus.');
});Keyboard Events
keyup: Fired when a key is released.
JavaScript
document.addEventListener('keyup', (e) => {
console.log('Key released:', e.key);
});keypress: Fired when a key is pressed down and that key normally produces a character value.
JavaScript
document.addEventListener('keypress', (e) => {
console.log('Key pressed:', e.key);
});keydown: Fired when a key is pressed down.
JavaScript
document.addEventListener('keydown', (e) => {
console.log('Key down:', e.key);
});Mouse Events
wheel: Fired when a wheel button of a pointing device is rotated.
JavaScript
document.addEventListener('wheel', (e) => {
console.log('Mouse wheel event detected.');
});mouseup: Fired when a pointing device button is released.
JavaScript
document.addEventListener('mouseup', (e) => {
console.log('Mouse button released.');
});mouseover: Fired when a pointing device is moved onto an element.
JavaScript
document.addEventListener('mouseover', (e) => {
console.log('Mouse over element.');
});mouseout: Fired when a pointing device is moved off an element.
JavaScript
document.addEventListener('mouseout', (e) => {
console.log('Mouse out of element.');
});mousemove: Fired when a pointing device is moved while over an element.
JavaScript
document.addEventListener('mousemove', (e) => {
console.log('Mouse move detected.');
});mouseleave: Fired when a pointing device is moved off an element and all its descendants.
JavaScript
document.addEventListener('mouseleave', (e) => {
console.log('Mouse leave element.');
});mouseenter: Fired when a pointing device is moved onto an element and all its descendants.
JavaScript
document.addEventListener('mouseenter', (e) => {
console.log('Mouse enter element.');
});mousedown: Fired when a pointing device button is pressed.
JavaScript
document.addEventListener('mousedown', (e) => {
console.log('Mouse button pressed.');
});dblclick: Fired when a pointing device button is clicked twice.
JavaScript
document.addEventListener('dblclick', (e) => {
console.log('Mouse double click detected.');
});contextmenu: Fired when the right button of the mouse is clicked (before the context menu is displayed).
JavaScript
document.addEventListener('contextmenu', (e) => {
console.log('Context menu requested.');
});click: Fired when a pointing device button is clicked.
JavaScript
document.addEventListener('click', (e) => {
console.log('Mouse click detected.');
});
Leave a Reply