HTML References

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

html

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

Example:

html

<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

html

<!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

html

<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

html

<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):

html

<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.

Browser Support

Chrome	Edge	Firefox	Safari	Opera	IE9+
Yes	Yes	Yes	Yes	Yes	Yes

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.

PreviousHTML Global Attributes NextComplete HTML Tag List