Web Development
Learn HTML5
HTML Events

HTML Events

Note

The examples below are just syntax. We will dive deeper into HTML Events when we get to JavaScript.

Also, this page introduces slight JavaScript syntax which is added in script tags. If you're not comfortable reading JavaScript code, I recommend you go through the Getting Started With JavaScript and JavaScript Functions modules.

HTML has the ability to trigger certain actions when a user interacts with elements on the webpage. These actions are called "Events" and usually need the assistance of JavaSctipt to achieve the correct behaviour.

Examples of events are: a user submitting a form, clicking a button and scrolling. Ssee further examples below:

These events are added as attributes to HTML elements as in the example below:

<form eventName="functionName()">
  <!-- Rest of code -->
</form>

All event attributes are added as "name-value" pairs.

Use the syntax eventName="functionName()" for all the events below.

The list below is not a complete reference to HTML Events, but rather a list of the most commonly used events. For a full list, visit the MDN Docs.

Window events

onload

This is the event that fires when the document has finished loading. For example, you might want to display a "Cookies Policy" Popup after everything else has already loaded in.

Usage:

<body onload="showCookies()">
  <!-- Some content here -->
 
  <script>
    alert("Please accept the cookies");
  </script>
</body>

In the example above, an alert saying, "Please accept the cookies", will be shown to the user when they navigate to the page.

onoffline

The event that fires when the browser detects that you have no active internet connection. Using this event, you can do things such as display a notice that tells the user that they are offline the way YouTube and Facebook do.

Usage:

<body onoffline="handleAppOffline()">
  <!-- Some content here -->
 
  <script>
    function handleAppOffline() {
      alert("You seem to be offline. Please check your internet connection.");
    }
  </script>
</body>

In the example above, the browser will check whether you are offline and then display an alert telling you that you are offline.

NOTE: It's not a good idea to use alerts for everything because they do not allow any other interaction of your web app until they are closed.

ononline

This is the event that fires when the browser detects that you are (back) online. It is the opposite of onoffline.

Usage:

<body ononline="handleBackOnline()">
  <!-- Some content here -->
 
  <script>
    function handleBackOnline() {
      alert("You are back online!");
    }
  </script>
</body>

onpageshow

This is similar to the onload event in that it triggers when the user navigates to the webpage. The difference between the two pages is that, onpageshow is going to trigger every single time that the user visits the website, but onload will only trigger when the website is not loaded from the cache.

When the website is loaded from cache, the onload event will not trigger.

Usage:

<body onpageshow="handleBackOnline()">
  <!-- Some content here -->
 
  <script>
    function handleBackOnline() {
      alert("Welcome back!");
    }
  </script>
</body>

Form events

Form events have also been covered in the module Working With Forms

onsubmit

This is the action that triggers when a user submits the form, either using the Enter key, or when they click the Submit button of the form. See the example below:

<form onsubmit="handleSubmit()">
  <!-- Rest of your form -->
</form>

The default behaviour for the form when a user submits it is to cause the entire webpage to reload. You can prevent this in JavaScript if you don't want this to happen. More on this in the JavaScript modules.

Note that you can call the submit function on the form as in the example above, or you can add it to the submit button of the form. When you add it to the submit button, the event to use is onclick and no longer onsubmit. For example:

<form>
  <!-- Rest of your form -->
 
  <button type="submit" onclick="handleSubmit()">Submit</button>
</form>

You can add the submit function both on the form and on the button, as long as you use the correct event names.

<!-- Submit function on the form -->
<form onsubmit="handleSubmit()">
  <!-- Rest of your form -->
 
  <!-- Submit function on the button also -->
  <button type="submit" onclick="handleSubmit()">Submit</button>
</form>

When you add the submit function on the button only and not on the form, what happens is called "event bubbling". This means that the event is propagated upwards from where it is fired - in this case the button when it is clicked - up until it reaches the parent element - in this case the form.

onblur

This event triggers when focus is lost on the form or on an input. It can be used to call a validation function immediately the user finishes typing in and clicks away, or it can be used for more subtle things like changing the background color of an input when the user clicks away, to show that they have filled in the input.

The syntax is:

<form onblur="handleBlur()"></form>

onchange

This is the event that fires whenever the value of an input changes. Not all inputs use the onchange event. For example, a checkbox will use the onchecked event.

It has the syntax:

<form onchange="handleChange()"></form>

oncontextmenu

This is the event that fires when the uses presses the Right-Click button on the mouse to open the context menu.

It has the syntax:

<form oncontextmenu="handleOpenContextMenu()"></form>

onfocus

This is the opposite of the onblur event - instead of performing an action when an element loses focus, the onfocus will trigger when an element if focussed on such as when it is clicked.

It has the syntax:

<form onfocus="handleFocus()"></form>

Keyboard events

onkeydown

This event fires when the user is pressing a key on the keyboard.

Example:

<input type="text" onkeydown="handleKeyDown()" />

onkeypress

This event fires when the user presses a key on the keyboard. It is similar to the onkeydown event - however, the difference is that onkeypress does not work for all keys such as CTRL and ALT.

If you want to have an event that works for all keys, then use onkeydown.

Example:

<input type="text" onkeypress="handleKeyPress()" />

onkeyup

This is the event that fires when a user presses a key on the keyboard - and releases it.

Example:

<input type="text" onkeyup="handleKeyUp()" />

Mouse events

onclick

Fires when the mouse is clicked on an element, usually a button, such as when you want to go to another page on a website, or when you click a login button.

Example:

<button onclick="handleClick()">Next Page</button>

onmousedown

This event fires when a mouse button (the left, middle, or right mouse button) is pressed over an element. Pressed, without being let go that is.

Example:

<p onmouseover="handleMouseOver()">Omae wa mou shindeiru</p>

Depending on the mouse button you have clicked, and also depending on your mouse settings as to which is the primary button, the order of events is as follows:

For the primary mouse button (usually left-click):

  • onmousedown
  • onmouseup
  • onclick

For the secondary mouse button (usually right-click):

  • onmousedown
  • onmouseup
  • oncontextmenu

onmousemove and onmouseover

These two events are similar, in that they are triggered when the mouse is (moving) over an element. You can use this to place focus on certain important elements on your website.

Example:

<!-- Example using `onmousemove` -->
<img onmousemove="handleMouseMove()" src="your_image.png" alt="Random image" />
 
<input type="text" onmousemove="handleFocusInput()" value="Hover this input" />
 
<!-- Example using `onmouseover` -->
<img onmouseover="handleMouseOver()" src="your_image.png" alt="Random image" />
 
<input type="text" onmouseover="handleFocusInput()" value="Hover this input" />

onmouseout

This event is usually used with the onmouseover event, and it triggers when the mouse moves away from an element.

Example:

<img onmouseout="handleMouseOut()" src="your_image.png" alt="Random image" />

onmouseup

Triggers when the mouse is released over an element. It is usually used with the onmousedown event.

Example:

<p onmouseout="handleMouseOut()">Omae wa mou shindeiru</p>

onwheel

This event fires when the user uses the scroll button of the mouse to scroll an element, or using the touchpad of a laptop to scroll.

Example:

<section onwheel="handleWheelScroll()>
  Some content here that can be scrolled.
</section>

Drag events

ondrag

Fires when an element or the selection of an element is being dragged. To make an element draggable, simply add the draggable attribute to the element. Read more about the draggable attribute in HTML Attributes

Example:

<div draggable="true" ondrag="handleDrag()"></div>

ondragend

Fired when the user has finished dragging the element.

Example:

<div draggable="true" ondragend="handleDragEnd()"></div>

ondragenter

This event fires when the element being dragged enters the drop zone or target.

Example:

<div draggable="true" ondragenter="handleDragEnter()"></div>

ondragleave

This event fires when the draggable element leaves a valid drop target.

Example:

<div draggable="true" ondragleave="handleDragLeave()"></div>

ondragover

This event triggers when the draggable element is over a valid drop target.

Example:

<div draggable="true" ondragover="handleDragOver()"></div>

ondragstart

This event fires when the element begins to be dragged.

Example:

<div draggable="true" ondragstart="handleDragStart()"></div>

ondrop

This event fires when the element is dropped in a valid drop target.

Example:

<div draggable="true" ondrop="handleDrop()"></div>

The order of events when dragging an element are as follows: 1. Events on the element being dragged: - ondragstart - ondrag - ondragend 2. Events fired on the drop target: - ondragover - ondragover - ondragleave - ondrop

onscroll

This event fires when an element is being scrolled. Usually, this refers to the body element. However, you can make multiple elements scrollable in HTML.

You can use this event to disply a "Back to top" button when the user begins to scroll down your website.

Example:

<body onscroll="handleScroll()">
  <!-- Button to scroll to top when clicked -->
  <button id="scroll-to-top-button" style="display: none">Scroll To Top</button>
 
  <script>
    // Get the scroll to top button and assign it to a custom
    // variable called "scrollToTop"
    const scrollToTop = document.getElementById("scroll-to-top-button");
 
    // Display the button as a block element when the user scrolls
    // more than 100 pixels from the top of the document
    if (window.element.scrollTop > 100) {
      scrollToTop.style.display = "block";
    }
  </script>
</body>

Clipboard events

oncopy

This event fires when the user copies the content of an input, or an element such as paragraph text, or an image.

Example:

<input type="text" oncopy="handleCopy()" value="Copy this text" />
 
<script>
  function handleCopy() {
    alert("You have copied the text!");
  }
</script>

oncut

This event fires when you cut some text inside an input. It is usually used with inputs which have a type of text, but can also be used with elements that have the contenteditable attribute set to true. Read more about contenteditable in the module, HTML Attributes

Example:

<input type="text" oncut="handleCut()" value="Cut this text" />
 
<script>
  function handleCut() {
    alert("You have pasted in some content");
  }
</script>
 
<!-- A paragraph where you can cut the text -->
<p contenteditable="true" oncut="handleCut()">You can cut this text</p>
 
<script>
  function handleCut() {
    alert("You have cut this content");
  }
</script>

onpaste

This is the event that fires when you paste something in your document - usually in inputs which have a type of text.

You can also paste in some content in other elements - however, they have to have the attribute of contenteditable set to true. Read more about contenteditable in the module, HTML Attributes

Example:

<!-- An input where you can paste something in -->
<input type="text" onpaste="handlePaste()" value="Paste something in" />
 
<script>
  function handlePaste() {
    alert("You have pasted in some content");
  }
</script>
 
<!-- A paragraph where you can paste something in -->
<p contenteditable="true" onpaste="handlePaste()">Paste something here</p>
 
<script>
  function handlePaste() {
    alert("You have pasted in some content");
  }
</script>

Media events

onpause

The event that fires when a pieces of media has been paused.

Example:

<audio onpause="handlePause()">
  <source src="audio.mp3" />
</audio>
 
<script>
  function handlePause() {
    alert("Audio has been paused");
  }
</script>

The onpause event also fires when the media has reached the end.

onplay

The event that triggers when an audio or video begins to play.

Example:

<audio onplay="handlePlay()">
  <source src="audio.mp3" />
</audio>
 
<script>
  function handlePlay() {
    alert("Audio has began playing");
  }
</script>

onended

This event fires when the media has reached the end. You can use it to show "Thank you" messages for example.

Example:

<audio onended="handleAudioEnded()">
  <source src="audio.mp3" />
</audio>
 
<script>
  function handleAudioEnded() {
    alert("Thank you for listening!");
  }
</script>
HTML EntitiesWhat Next?