HTML — Event Attributes

Introduction – What are Event Attributes?

Event attributes are special HTML attributes that let you run JavaScript code when something happens on the page.
The “something” is called an event – a click, a key press, a mouse movement, and many more.
By adding an event attribute to an element, you tell the browser: “When this event occurs, execute this code.”

Good to know: Event attributes belong to the set of global attributes, so you can use them on almost any HTML tag.

In this lesson you will see:

1. The most common event attributes.
2. How to write inline JavaScript safely.
3. A quick comparison table.
4. Tips to avoid typical pitfalls.

The core set of event attributes

The browser defines dozens of events, but beginners usually start with these ten:

Event	Attribute	Typical use
click	onclick	Button or link activation
mouseover	onmouseover	Highlight when the cursor enters
mouseout	onmouseout	Remove highlight when the cursor leaves
mousedown	onmousedown	Start a drag operation
mouseup	onmouseup	End a drag operation
keydown	onkeydown	React as soon as a key is pressed
keyup	onkeyup	React after the key is released
focus	onfocus	Input receives focus
blur	onblur	Input loses focus
submit	onsubmit	Form is about to be sent

Simple click example

<button onclick="alert('You clicked the button!')">
  Click me
</button>

What the browser displays

The page shows a button labeled “Click me”. When you press it, a small dialog box appears with the text “You clicked the button!”.

Changing text with a click

<p id="msg">Hello, world!</p>
<button onclick="document.getElementById('msg').textContent = 'You changed me!'">
  Change text
</button>

What the browser displays

A paragraph reads “Hello, world!” and a button below it. Clicking the button instantly rewrites the paragraph to say “You changed me!”.

Mouseover / mouseout for visual feedback

<div 
  style="width:150px;height:80px;background:#e0e0e0;text-align:center;line-height:80px;"
  onmouseover="this.style.background='#a0c4ff'"
  onmouseout="this.style.background='#e0e0e0'">
  Hover over me
</div>

What the browser displays

A light‑gray rectangle with the words “Hover over me”. When the cursor enters, the background turns soft blue; when it leaves, it returns to gray.

Form submission with validation

<form onsubmit="return validateForm()">
  <label>Age:
    <input type