HTML Basic Events

Definition and Usage

HTML event attributes are on* attributes you put on elements so the page can react when something happens—a click, a form change, a key press, or focus moving into a field.

What does an event attribute do?

The attribute name names the event (onclick, onchange). The value is JavaScript that runs when that event fires. That is how a static HTML page starts feeling interactive.

Where do beginners start?

Learn onclick on buttons, onchange / onsubmit on forms, mouse enter/leave for hover demos, and onkeydown / onfocus for inputs. If you have not linked scripts yet, see JavaScript in HTML first.

Inline attributes vs script listeners

Inline on* attributes are great for learning and tiny examples. As pages grow, prefer addEventListener in a <script> so markup stays readable and you can attach more than one handler per event.

HTML Syntax

Put the handler on the element that should react:

<button type="button"
  onclick="document.getElementById('msg').textContent = 'Clicked!'">
  Click Me
</button>
<p id="msg">Waiting…</p>

Modern alternative (same idea, separate script):

document.querySelector("#myBtn").addEventListener("click", function () {
  document.getElementById("msg").textContent = "Clicked!";
});

Core HTML Concepts

Events you will use most often on HTML pages:

Event groups (quick map)

Inline attribute vs addEventListener

How to Add Events in HTML

A practical workflow:

1. Pick the element that should react (button, input, form, …).
2. Choose the matching on* attribute for the user action.
3. Write a short JavaScript expression or call a named function.
4. Update the page (text, styles, show/hide) from that handler.
5. When the demo grows, move the same logic into addEventListener.

Live Preview

Click the button—an onclick-style handler updates the message (wired with addEventListener under the hood).

HTML Examples

Six beginner patterns: click, hover, change, submit, keydown, and focus/blur.

<button type="button"
  onclick="document.getElementById('msg').textContent = 'Button clicked!'">
  Click Me
</button>
<p id="msg">Waiting for a click…</p>

<div class="box"
  onmouseover="this.style.background='#dbeafe'"
     onmouseout="this.style.background=''">
  Hover over me
</div>

<label for="color">Pick a color:</label>
<select id="color"
  onchange="document.getElementById('out').textContent = 'You chose: ' + this.value">
  <option value="">-- choose --</option>
  <option value="Red">Red</option>
  <option value="Green">Green</option>
  <option value="Blue">Blue</option>
</select>
<p id="out">No selection yet.</p>

<form onsubmit="return checkName()">
  <label>Name: <input type="text" id="name" required></label>
  <button type="submit">Submit</button>
</form>
<p id="status"></p>
<script>
  function checkName() {
    var name = document.getElementById("name").value.trim();
    if (name.length < 2) {
      document.getElementById("status").textContent = "Name must be at least 2 characters.";
      return false;
    }
    document.getElementById("status").textContent = "Form would submit: " + name;
    return false;
  }
</script>

<label>Type here:
  <input type="text" onkeydown="showKey(event)">
</label>
<p id="key">Press a key…</p>
<script>
  function showKey(e) {
    document.getElementById("key").textContent =
      "Last key: " + e.key + " (code: " + e.code + ")";
  }
</script>

<label>Email:
  <input type="email"
       onfocus="this.style.borderColor='#2563eb'"
    onblur="this.style.borderColor='#cbd5e1'"
    placeholder="[email protected]">
</label>

Key Takeaways