Quick Reference
This is a quick reference list of HTML events that can be used to trigger JavaScript functions and run them on the page.
Clipboard Events
- HTML – oncopy EventThe oncopy event fires when the user copies the contents of an element or an image to their clipboard.
- HTML – oncut EventThe oncut event fires when the user cuts the contents of an element or an image to their clipboard.
- HTML – onpaste EventThe onpaste event fires when the user pastes content from their clipboard into an HTML element.
Drag Events
- HTML – onscroll EventThe onscroll event fires when an element containing a scrollbar is being scrolled by the user.
- HTML – ondrop EventThe ondrop event fires when a draggable element or text selection is dropped on a valid drop target via drag and drop.
- HTML – ondragstart EventThe ondragstart event fires when the user starts to drag an element or text selection via drag and drop.
- HTML – ondragover EventThe ondragover event fires when a draggable element or text selection is being dragged over a valid drop target via drag and drop.
- HTML – ondragleave EventThe ondragleave event fires when a draggable element or text selection leaves a valid drop target where it can be dropped via drag and drop.
- HTML – ondragenter EventThe ondragenter event fires when a draggable element or text selection enters a valid target where it can be dropped via drag and drop.
- HTML – ondragend EventThe ondragend event fires when the user has finished dragging an element or text selection via drag and drop.
- HTML – ondrag EventThe ondrag event fires when an element or text selection is being dragged via drag and drop.
Form Events
- HTML – onfocusout EventThe onfocusout event fires when a form field is about to lose focus as the user clicks out of it. The onfocusout event is the opposite of the onfocusin event.
- HTML – onfocusin EventThe onfocusin event fires when a form field is about to gain focus as the user clicks into it. The onfocusin event is the opposite of the onfocusout event.
- HTML – onsubmit EventThe onsubmit event fires when the user submits the form by clicking the submit button.
- HTML – onselect EventThe onselect event fires after text has been selected in an HTML <input> or <textarea> element.
- HTML – onsearch EventThe onsearch event fires when a user presses the “enter” key or clicks the “x” button in an <input> element with type=”search”.
- HTML – onreset EventThe onreset event fires when the user resets the form by clicking the reset button.
- HTML – oninvalid EventThe oninvalid event fires when an <input> element is invalid (e.g., if the required attribute is set and the field is empty).
- HTML – oninput EventThe oninput event fires when the value of an HTML <input> or <textarea> element is first input or is changed.
- HTML – oncontextmenu EventThe oncontextmenu event fires when the user right-clicks on an element to open the context menu.
- HTML – onchange EventThe onchange event fires when the value of the element is changed by the user and the element loses focus.
- HTML – onfocus EventThe onfocus event fires when a form field gains focus when as user clicks into it. The onfocus event is the opposite of the onblur event.
- HTML – onblur EventThe onblur event fires when a form field loses focus, and is often used with form validation. The onblur event is the opposite of the onfocus event.
Keyboard Events
- HTML – onkeypress EventThe onkeypress event fires when the user presses a key on the keyboard, but is not fired for all keys (e.g. ALT, CTRL, SHIFT, ESC).
- HTML – onkeyup EventThe onkeyup event fires when the user releases a key on the keyboard.
- HTML – onkeydown EventThe onkeydown event fires when the user presses a key on the keyboard.
Media Events
- HTML – onabort EventThe onabort event fires when the loading of an audio/video file is aborted, but not due to error.
- HTML – onwaiting EventThe onwaiting event fires when the video stops because the next frame needs to buffer.
- HTML – onvolumechange EventThe onvolumechange event fires each time the volume of the video/audio has been changed by increasing/decreasing it or by muting/unmuting it.
- HTML – ontimeupdate EventThe ontimeupdate event fires when the playing position of the audio/video has changed.
- HTML – onsuspend EventThe onsuspend event fires when loading of the media is suspended or prevented from continuing.
- HTML – onstalled EventThe onstalled event fires when the browser is trying to get media data, but the data is not available.
- HTML – onseeking EventThe onseeking event fires when the user starts to move or skip to a new position in the audio/video.
- HTML – onseeked EventThe onseeked event fires when the user is finished moving or skipping to a new position in the track.
- HTML – onratechange EventThe onratechange event fires when the playing speed of the audio/video has changed (to a slow motion or fast forward mode).
- HTML – onprogress EventThe onprogress event fires when the browser is downloading the requested audio/video file.
- HTML – onplaying EventThe onplaying event fires when the audio/video is playing after having been manually/programmatically paused or had stopped to buffer.
- HTML – onplay EventThe onplay event fires when the audio/video has been started or is no longer being paused.
- HTML – onpause EventThe onpause event fires when the audio/video is paused either by the user or a script.
- HTML – onloadstart EventThe onloadstart event fires when the browser starts looking for the specified audio/video.
- HTML – onloadedmetadata EventThe onloadedmetadata event fires when meta data for the specified audio/video has finished loading.
- HTML – onloadeddata EventThe onloadeddata event fires when data for the current frame is loaded, but not enough data to play the next frame.
- HTML – onended EventThe onended event fires when the audio/video has reached the end.
- HTML – onemptied EventThe onemptied event fires when the media encounters some fatal error, the file becomes unavailable, or the media playlist is empty.
- HTML – ondurationchange EventThe ondurationchange event fires when the duration of the audio/video is changed.
- HTML – oncuechange EventThe oncuechange event defines a script to run when the cue changes in a track element.
- HTML – oncanplaythrough EventThe oncanplaythrough event fires when the browser estimates it can play through the specified media without having to stop for buffering.
- HTML – oncanplay EventThe oncanplay event fires when the video has buffered enough for the browser to start playing the specified audio/video.
- HTML – onerror EventThe onerror event fires when an error occurs while loading an external file like an <img>, <object>, <link>, or <script>.
Mouse Events
- HTML – onmouseleave EventThe onmouseleave event fires when the user moves the cursor out of an HTML element.
- HTML – onmouseenter EventThe onmouseenter event fires when the user moves the cursor into an HTML element.
- HTML – ontoggle EventThe ontoggle event fires when the user opens or closes the <details> element.
- HTML – onwheel EventThe onwheel event fires when the wheel of a pointing device is rolled up/down over an element, or the user scrolls/zooms on an element with a touchpad.
- HTML – onmouseover EventThe onmouseover event fires when the user moves the cursor from outside to over an HTML element.
- HTML – onmouseout EventThe onmouseout event fires when the user moves the cursor from inside to outside an HTML element.
- HTML – onmousemove EventThe onmousemove event fires when the user moves the cursor while over an HTML element.
- HTML – onmouseup EventThe onmouseup event fires when the user releases the mouse button while over an HTML element.
- HTML – onmousedown EventThe onmousedown event fires when the user presses down the mouse button while over an HTML element.
- HTML – ondblclick EventThe ondblclick event fires when a user double clicks their mouse while on an HTML element.
- HTML – onclick EventThe onclick event fires when a user clicks their mouse while on an HTML element.
Touch Events
- HTML – ontouchstart EventThe ontouchstart event fires when the user touches an element.
- HTML – ontouchmove EventThe ontouchmove event fires when the user moves their finger on the screen.
- HTML – ontouchend EventThe ontouchend event fires when the user removes their finger from an element.
- HTML – ontouchcancel EventThe ontouchcancel event fires when the touch event on a touch screen gets interrupted.
Window Events
- HTML – onunload EventThe onunload event fires when the user navigates away from the page by clicking a link, submitting a form, closing the browser window, etc.
- HTML – onstorage EventThe onstorage event fires when the browser window storage area has been changed.
- HTML – onresize EventThe onresize event fires when the browser window is resized.
- HTML – onpopstate EventThe onpopstate event fires when the window’s history changes.
- HTML – onpageshow EventThe onpageshow event fires when the user first navigates to a webpage or reloads the page.
- HTML – onpagehide EventThe onpagehide event fires when the user is leaving a webpage by clicking a link, refreshing the page, submitting a form, closing the window, etc.
- HTML – onmessage EventThe onmessage event fires when an HTML element has received a message through an event source.
- HTML – onload EventThe onload event fires when an element has been loaded, and is often used to run a script once the webpage has completely loaded all content.
- HTML – onhashchange EventThe onhashchange event fires when there has been a change to the anchor part of the page’s URL (the anchor begins with the # symbol).
- HTML – onerror EventThe onerror event fires when an error occurs while loading an external file like an <img>, <object>, <link>, or <script>.
- HTML – onbeforeunload EventThe onbeforeunload event fires when the user has made an action to leave the current page. Most browsers provide a default message.
- HTML – onbeforeprint EventThe onbeforeprint event fires when a page is about to start printing or the dialogue box appears.
- HTML – onafterprint EventThe onafterprint event fires when a page has started printing or once the print dialogue box has been closed.
HTML Notes:
- In our HTML section the term “tag” and “element” are often used interchangeably to refer to both the tag used to create a page element and the element created by the tag (<p> tag = <p> element = paragraph on the page)
- HTML5 is not case sensitive; so <P> is the same as <p>, <H1> is the same as <h1>
- Global attributes can be used with all HTML tags and are therefore not mentioned on every tag page
- To write clean, readable HTML code, it is best to use indentation whereas elements within elements are indented (tabbed or spaces) to create something that looks like a project outline
- The browser will automatically remove any extra spaces and lines in your HTML code when the page is displayed
- Double quotes or single quotes can be used around HTML attribute values, but when the attribute value itself contains one form of quote, it will be necessary to use the other around the attribute
We’d like to acknowledge that we learned a great deal of our coding from W3Schools and TutorialsPoint, borrowing heavily from their teaching process and excellent code examples. We highly recommend both sites to deepen your experience, and further your coding journey. We’re just hitting the basics here at 1SMARTchicken.