Home › Insights › Tutorials › HTML › Event Attributes

💡 Tip: Login now to track your course progress and unlock your downloadable certificates instantly!

Event Attributes

HTML event attributes allow you to add interactivity to your webpage.
They define how elements respond when certain events occur — such as when a user clicks a button, hovers over an image, submits a form, presses a key, or moves the mouse.

In short, event attributes connect HTML with JavaScript to make webpages dynamic and interactive.

What is an Event?

An event is an action that happens in the browser — triggered by the user or the browser itself.

Examples of events:

A user clicks a button → onclick
A webpage finishes loading → onload
A user presses a key → onkeydown
A form is submitted → onsubmit
A mouse pointer hovers over an element → onmouseover

Basic Syntax

<element event="JavaScript code"></element>

Example:

<button onclick="alert('Button clicked!')">Click Me</button>

When the user clicks this button, an alert box will pop up.

Common Event Attributes

Event Attribute	Description	Example
`onclick`	Triggered when an element is clicked	`<button onclick="myFunction()">Click</button>`
`onload`	Triggered when the page or image finishes loading	`<body onload="init()">`
`onchange`	Triggered when a form element value changes	`<input onchange="checkValue()">`
`onmouseover`	Triggered when the mouse pointer hovers over an element	`<div onmouseover="highlight()">Hover</div>`
`onmouseout`	Triggered when the mouse pointer leaves the element	`<div onmouseout="removeHighlight()">Move out</div>`
`onkeydown`	Triggered when a keyboard key is pressed	`<input onkeydown="keyPress()">`
`onkeyup`	Triggered when a keyboard key is released	`<input onkeyup="showText()">`
`onfocus`	Triggered when an input field gets focus	`<input onfocus="highlightField()">`
`onblur`	Triggered when an input field loses focus	`<input onblur="removeHighlight()">`
`onsubmit`	Triggered when a form is submitted	`<form onsubmit="return validateForm()">`

Example 1: Click Event

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Event Example</title>
  <script>
    function showMessage() {
      alert("You clicked the button!");
    }
  </script>
</head>
<body>
  <button onclick="showMessage()">Click Me</button>
</body>
</html>

Example 2: Form Validation Event

<form onsubmit="return validateForm()">
  <input type="text" id="name" placeholder="Enter your name">
  <button type="submit">Submit</button>
</form>

<script>
  function validateForm() {
    let name = document.getElementById('name').value;
    if (name === "") {
      alert("Please enter your name!");
      return false;
    }
    alert("Form submitted successfully!");
    return true;
  }
</script>

The form will only submit if the name field is filled.

Example 3: Mouse Events

<div onmouseover="this.style.background='lightgreen'" 
     onmouseout="this.style.background='white'"
     style="width:200px; height:100px; border:1px solid gray; text-align:center; line-height:100px;">
  Hover over me!
</div>

The background color changes when you hover your mouse.

Event Categories

Category	Examples
Mouse Events	`onclick`, `ondblclick`, `onmouseover`, `onmouseout`, `onmousemove`
Keyboard Events	`onkeydown`, `onkeypress`, `onkeyup`
Form Events	`onsubmit`, `onchange`, `onfocus`, `onblur`
Window Events	`onload`, `onresize`, `onscroll`, `onunload`

Best Practice

While you can write JavaScript inside HTML event attributes, it’s better to separate JavaScript from HTML for cleaner, maintainable code.

Example (better approach):

<button id="clickBtn">Click Me</button>

<script>
document.getElementById("clickBtn").onclick = function() {
  alert("Hello, World!");
};
</script>

Complete HTML Event Attributes Reference

Mouse Events

Event Attribute	Description
`onclick`	Triggered when an element is clicked.
`ondblclick`	Triggered when an element is double-clicked.
`onmousedown`	Triggered when a mouse button is pressed down.
`onmouseup`	Triggered when a mouse button is released.
`onmouseover`	Triggered when the mouse pointer enters an element.
`onmouseout`	Triggered when the mouse pointer leaves an element.
`onmousemove`	Triggered when the mouse is moved within an element.
`onwheel`	Triggered when the mouse wheel is scrolled.
`oncontextmenu`	Triggered when the right mouse button is clicked (opens context menu).

Keyboard Events

Event Attribute	Description
`onkeydown`	Triggered when a key is pressed down.
`onkeypress`	Triggered when a key is pressed (deprecated in HTML5).
`onkeyup`	Triggered when a key is released.

Form Events

Event Attribute	Description
`oninput`	Triggered when user input is received.
`onchange`	Triggered when an element’s value changes.
`onsubmit`	Triggered when a form is submitted.
`onreset`	Triggered when a form is reset.
`onfocus`	Triggered when an element receives focus.
`onblur`	Triggered when an element loses focus.
`onselect`	Triggered when text within an input or textarea is selected.
`oninvalid`	Triggered when a form field fails validation.

Window / Document Events

Event Attribute	Description
`onload`	Triggered when the page or element is fully loaded.
`onunload`	Triggered when the page is closed or refreshed.
`onresize`	Triggered when the browser window is resized.
`onscroll`	Triggered when the user scrolls an element or page.
`onerror`	Triggered when an error occurs while loading an element (like an image).

Drag & Drop Events

Event Attribute	Description
`ondrag`	Triggered while an element is being dragged.
`ondragstart`	Triggered when drag starts.
`ondragend`	Triggered when drag ends.
`ondragenter`	Triggered when dragged element enters a valid drop target.
`ondragleave`	Triggered when dragged element leaves a drop target.
`ondragover`	Triggered when dragged element is over a drop target.
`ondrop`	Triggered when dragged element is dropped.

Clipboard Events

Event Attribute	Description
`oncopy`	Triggered when text or content is copied.
`oncut`	Triggered when text or content is cut.
`onpaste`	Triggered when text or content is pasted.

Media Events (Audio/Video)

Event Attribute	Description
`onplay`	Triggered when media starts playing.
`onpause`	Triggered when media is paused.
`onended`	Triggered when media playback ends.
`onvolumechange`	Triggered when the volume changes.
`ontimeupdate`	Triggered when the playback position changes.
`onloadeddata`	Triggered when media data is loaded.
`onprogress`	Triggered while downloading media data.
`onerror`	Triggered when media loading fails.

Animation & Transition Events

Event Attribute	Description
`onanimationstart`	Triggered when a CSS animation starts.
`onanimationend`	Triggered when a CSS animation ends.
`onanimationiteration`	Triggered when a CSS animation repeats.
`ontransitionend`	Triggered when a CSS transition finishes.

Clipboard & Input Composition Events

Event Attribute	Description
`oncompositionstart`	Triggered when text composition (IME) starts.
`oncompositionupdate`	Triggered when text composition is updated.
`oncompositionend`	Triggered when text composition ends.

Touch & Pointer Events (Mobile)

Event Attribute	Description
`ontouchstart`	Triggered when a touch point is placed on the touch surface.
`ontouchmove`	Triggered when a touch point moves.
`ontouchend`	Triggered when a touch point is removed.
`onpointerdown`	Triggered when a pointer (mouse, pen, or touch) is pressed.
`onpointerup`	Triggered when a pointer is released.
`onpointermove`	Triggered when a pointer moves.

Miscellaneous Events

Event Attribute	Description
`onabort`	Triggered when media loading is aborted.
`onbeforeunload`	Triggered before a document is unloaded.
`onhashchange`	Triggered when the URL hash changes.
`onmessage`	Triggered when a message is received via `postMessage()`.
`onpopstate`	Triggered when navigating browser history.
`onstorage`	Triggered when data in localStorage or sessionStorage changes.

Conclusion

Event attributes are essential for connecting HTML with JavaScript.
Understanding them enables you to build interactive, responsive, and dynamic web pages that respond to user actions and system changes effectively.

HTML Basics

HTML Forms

HTML Images & Media

HTML Text & Links

HTML Layout

HTML List & Tables

HTML Advance

HTML References