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 Event
The oncopy event fires when the user copies the contents of an element or an image to their clipboard.
HTML – oncut Event
The oncut event fires when the user cuts the contents of an element or an image to their clipboard.
HTML – onpaste Event
The onpaste event fires when the user pastes content from their clipboard into an HTML element.
Drag Events
HTML – ondrag Event
The ondrag event fires when an element or text selection is being dragged via drag and drop.
HTML – ondragend Event
The ondragend event fires when the user has finished dragging an element or text selection via drag and drop.
HTML – ondragenter Event
The ondragenter event fires when a draggable element or text selection enters a valid target where it can be dropped via drag and drop.
HTML – ondragleave Event
The 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 – ondragover Event
The ondragover event fires when a draggable element or text selection is being dragged over a valid drop target via drag and drop.
HTML – ondragstart Event
The ondragstart event fires when the user starts to drag an element or text selection via drag and drop.
HTML – ondrop Event
The ondrop event fires when a draggable element or text selection is dropped on a valid drop target via drag and drop.
HTML – onscroll Event
The onscroll event fires when an element containing a scrollbar is being scrolled by the user.
Form Events
HTML – onblur Event
The 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.
HTML – onchange Event
The onchange event fires when the value of the element is changed by the user and the element loses focus.
HTML – oncontextmenu Event
The oncontextmenu event fires when the user right-clicks on an element to open the context menu.
HTML – onfocus Event
The onfocus event fires when a form field gains focus as the user clicks into it. The onfocus event is the opposite of the onblur event.
HTML – onfocusin Event
The 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 – onfocusout Event
The onfocusout event fires when a form field is about to lose focus as the user clicks out of it. It’s the opposite of the onfocusin event.
HTML – oninput Event
The oninput event fires when the value of an HTML input or textarea element is first input or is changed.
HTML – oninvalid Event
The oninvalid event fires when an input element is invalid (e.g., if the required attribute is set and the field is empty).
HTML – onreset Event
The onreset event fires when the user resets the form by clicking the reset button.
HTML – onsearch Event
The onsearch event fires when a user presses the “enter” key or clicks the “x” button in an input element with type=”search”.
HTML – onselect Event
The onselect event fires after text has been selected in an HTML input or textarea element.
HTML – onsubmit Event
The onsubmit event fires when the user submits the form by clicking the submit button.
Keyboard Events
HTML – onkeypress Event
The 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 – onkeydown Event
The onkeydown event fires when the user presses a key on the keyboard.
HTML – onkeyup Event
The onkeyup event fires when the user releases a key on the keyboard.
Media Events
HTML – onabort Event
The onabort event fires when the loading of an audio/video file is aborted, but not due to error.
HTML – oncanplay Event
The oncanplay event fires when the video has buffered enough for the browser to start playing the specified audio/video.
HTML – oncanplaythrough Event
The oncanplaythrough event fires when the browser estimates it can play through the specified media without having to stop for buffering.
HTML – oncuechange Event
The oncuechange event defines a script to run when the cue changes in a track element.
HTML – ondurationchange Event
The ondurationchange event fires when the duration of the audio/video is changed.
HTML – onemptied Event
The onemptied event fires when the media encounters some fatal error, the file becomes unavailable, or the media playlist is empty.
HTML – onended Event
The onended event fires when the audio/video has reached the end.
HTML – onerror Event
The onerror event fires when an error occurs while loading an external file like an img, object, link, or script.
HTML – onloadeddata Event
The onloadeddata event fires when data for the current frame is loaded, but not enough data to play the next frame.
HTML – onloadedmetadata Event
The onloadedmetadata event fires when meta data for the specified audio/video has finished loading.
HTML – onloadstart Event
The onloadstart event fires when the browser starts looking for the specified audio/video.
HTML – onpause Event
The onpause event fires when the audio/video is paused either by the user or a script.
HTML – onplay Event
The onplay event fires when the audio/video has been started or is no longer being paused.
HTML – onplaying Event
The onplaying event fires when the audio/video is playing after having been manually/programmatically paused or had stopped to buffer.
HTML – onprogress Event
The onprogress event fires when the browser is downloading the requested audio/video file.
HTML – onratechange Event
The onratechange event fires when the playing speed of the audio/video has changed (to a slow motion or fast forward mode).
HTML – onseeked Event
The onseeked event fires when the user is finished moving or skipping to a new position in the track.
HTML – onseeking Event
The onseeking event fires when the user starts to move or skip to a new position in the audio/video.
HTML – onstalled Event
The onstalled event fires when the browser is trying to get media data, but the data is not available.
HTML – onsuspend Event
The onsuspend event fires when loading of the media is suspended or prevented from continuing.
HTML – ontimeupdate Event
The ontimeupdate event fires when the playing position of the audio/video has changed.
HTML – onvolumechange Event
The onvolumechange event fires each time the volume of the video/audio has been changed by increasing/decreasing it or by muting/unmuting it.
HTML – onwaiting Event
The onwaiting event fires when the video stops because the next frame needs to buffer.
Mouse Events
HTML – onclick Event
The onclick event fires when a user clicks their mouse while on an HTML element.
HTML – ondblclick Event
The ondblclick event fires when a user double clicks their mouse while on an HTML element.
HTML – onmousedown Event
The onmousedown event fires when the user presses down the mouse button while over an HTML element.
HTML – onmouseenter Event
The onmouseenter event fires when the user moves the cursor into an HTML element.
HTML – onmouseleave Event
The onmouseleave event fires when the user moves the cursor out of an HTML element.
HTML – onmousemove Event
The onmousemove event fires when the user moves the cursor while over an HTML element.
HTML – onmouseout Event
The onmouseout event fires when the user moves the cursor from inside to outside an HTML element.
HTML – onmouseover Event
The onmouseover event fires when the user moves the cursor from outside to over an HTML element.
HTML – onmouseup Event
The onmouseup event fires when the user releases the mouse button while over an HTML element.
HTML – ontoggle Event
The ontoggle event fires when the user opens or closes the details element.
HTML – onwheel Event
The 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.
Touch Events
HTML – ontouchcancel Event
The ontouchcancel event fires when the touch event on a touch screen gets interrupted.
HTML – ontouchend Event
The ontouchend event fires when the user removes their finger from an element.
HTML – ontouchmove Event
The ontouchmove event fires when the user moves their finger on the screen.
HTML – ontouchstart Event
The ontouchstart event fires when the user touches an element.
Window Events
HTML – onafterprint Event
The onafterprint event fires when a page has started printing or once the print dialogue box has been closed.
HTML – onbeforeprint Event
The onbeforeprint event fires when a page is about to start printing or the dialogue box appears.
HTML – onbeforeunload Event
The onbeforeunload event fires when the user has made an action to leave the current page. Most browsers provide a default message.
HTML – onerror Event
The onerror event fires when an error occurs while loading an external file like an img, object, link, or script.
HTML – onhashchange Event
The 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 – onload Event
The 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 – onmessage Event
The onmessage event fires when an HTML element has received a message through an event source.
HTML – onpagehide Event
The 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 – onpageshow Event
The onpageshow event fires when the user first navigates to a webpage or reloads the page.
HTML – onpopstate Event
The onpopstate event fires when the window’s history changes.
HTML – onresize Event
The onresize event fires when the browser window is resized.
HTML – onstorage Event
The onstorage event fires when the browser window storage area has been changed.
HTML – onunload Event
The onunload event fires when the user navigates away from the page by clicking a link, submitting a form, closing the browser window, etc.
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.
Why 1SMARTchicken?
See More →
Thanks for your support!
HTML Books
All are affiliate links. Thank you for your support!
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 (
ptag =pelement = paragraph on the page) - HTML5 is not case sensitive; so
Pis the same asp,ÂH1is the same ash1 - 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
Feedback
If you see an error on the page or the code itself is incorrect or incomplete, or just plain wrong, please let us know. We’re always learning. NOTE: we do not sell your information and will not send you spam emails.
