HTML Reference

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 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 – onscroll Event
    The onscroll event fires when an element containing a scrollbar is being scrolled by the user.
  • 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 – ondragstart Event
    The ondragstart event fires when the user starts to drag an element or text selection 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 – 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 – 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 – ondragend Event
    The ondragend event fires when the user has finished dragging an element or text selection via drag and drop.
  • HTML – ondrag Event
    The ondrag event fires when an element or text selection is being dragged via drag and drop.

Form Events

  • HTML – onfocusout Event
    The 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 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 – onsubmit Event
    The onsubmit event fires when the user submits the form by clicking the submit button.
  • HTML – onselect Event
    The onselect event fires after text has been selected in an HTML <input> or <textarea> element.
  • 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 – onreset Event
    The onreset event fires when the user resets the form by clicking the reset button.
  • 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 – oninput Event
    The oninput event fires when the value of an HTML <input> or <textarea> element is first input or is changed.
  • HTML – oncontextmenu Event
    The oncontextmenu event fires when the user right-clicks on an element to open the context menu.
  • HTML – onchange Event
    The onchange event fires when the value of the element is changed by the user and the element loses focus.
  • HTML – onfocus Event
    The 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 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.

Keyboard Events

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 – onwaiting Event
    The onwaiting event fires when the video stops because the next frame needs to buffer.
  • 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 – ontimeupdate Event
    The ontimeupdate event fires when the playing position of the audio/video has changed.
  • HTML – onsuspend Event
    The onsuspend event fires when loading of the media is suspended or prevented from continuing.
  • HTML – onstalled Event
    The onstalled event fires when the browser is trying to get media data, but the data is not available.
  • HTML – onseeking Event
    The onseeking event fires when the user starts to move or skip to a new position in the audio/video.
  • HTML – onseeked Event
    The onseeked event fires when the user is finished moving or skipping to a new position in the track.
  • 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 – onprogress Event
    The onprogress event fires when the browser is downloading the requested audio/video file.
  • 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 – onplay Event
    The onplay event fires when the audio/video has been started or is no longer being paused.
  • HTML – onpause Event
    The onpause event fires when the audio/video is paused either by the user or a script.
  • HTML – onloadstart Event
    The onloadstart event fires when the browser starts looking for the specified audio/video.
  • HTML – onloadedmetadata Event
    The onloadedmetadata event fires when meta data for the specified audio/video has finished loading.
  • 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 – onended Event
    The onended event fires when the audio/video has reached the end.
  • 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 – ondurationchange Event
    The ondurationchange event fires when the duration of the audio/video is changed.
  • HTML – oncuechange Event
    The oncuechange event defines a script to run when the cue changes in a track element.
  • 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 – oncanplay Event
    The oncanplay event fires when the video has buffered enough for the browser to start playing the specified audio/video.
  • HTML – onerror Event
    The onerror event fires when an error occurs while loading an external file like an <img>, <object>, <link>, or <script>.

Mouse Events

Touch Events

Window Events

  • 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.
  • HTML – onstorage Event
    The onstorage event fires when the browser window storage area has been changed.
  • HTML – onresize Event
    The onresize event fires when the browser window is resized.
  • HTML – onpopstate Event
    The onpopstate event fires when the window’s history changes.
  • HTML – onpageshow Event
    The onpageshow event fires when the user first navigates to a webpage or reloads the page.
  • 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 – onmessage Event
    The onmessage event fires when an HTML element has received a message through an event source.
  • 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 – 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 – onerror Event
    The onerror event fires when an error occurs while loading an external file like an <img>, <object>, <link>, or <script>.
  • 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 – onbeforeprint Event
    The onbeforeprint event fires when a page is about to start printing or the dialogue box appears.
  • HTML – onafterprint Event
    The 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.