JavaScript Events

Reviewed & published by Brayan K

Learn how to make your web pages come alive by responding to user interactions like clicks, key presses, and form submissions.

Part of the free JavaScript course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

What You'll Learn in This Lesson

• What events are and why they matter
• Add listeners with addEventListener()
• Handle mouse, keyboard, and form events
• Use the event object for details
• Stop default browser behaviour
• Build interactive UI with event handling

💡 Running Code Locally: While this online editor runs real JavaScript, some advanced examples may have limitations. For the best experience:

• Download Node.js to run JavaScript on your computer
• Use your browser's Developer Console (Press F12) to test code snippets
• Create a .html file with <script> tags and open it in your browser

🎯 Real-World Analogy: Events are like a hotel receptionist:

• • The receptionist listens for guests arriving (event listener)
• • When a guest arrives, they respond appropriately (event handler)
• • Different actions require different responses (click vs. hover vs. type)

🧠 What Are Events?

An event is an action that occurs in the browser.

JavaScript allows you to listen for these events and respond to them — this is called event handling.

💡 Without events, your web pages would be static and non-interactive.

⚙️ Example: Simple Click Event

<button id="clickMe">Click Me!</button>

const button = document.getElementById("clickMe");

button.addEventListener("click", () => {
    console.log("Button clicked!");
});

Button clicked!

This is the basic pattern of all JavaScript interactivity — select → listen → respond.

🧩 Adding Event Listeners

The modern and most reliable way to handle events is with addEventListener().

📘 Syntax:

element.addEventListener(eventType, function);

🧠 Example: Button Click

button.addEventListener("click", function() {
    console.log("You clicked the button!");
});

Or using arrow functions (modern ES6 style):

button.addEventListener("click", () => {
    console.log("You clicked the button!");
});

🖱️ Mouse Events

Mouse events are triggered when the user interacts with the mouse.

Here are the most common ones:

🧩 Example:

<button id="mouseBtn">Hover or Click</button>

const btn = document.getElementById("mouseBtn");

btn.addEventListener("click", () => console.log("Clicked!"));
btn.addEventListener("dblclick", () => console.log("Double-clicked!"));
btn.addEventListener("mouseenter", () => console.log("Mouse entered!"));
btn.addEventListener("mouseleave", () => console.log("Mouse left!"));

Mouse entered!
Clicked!
Mouse left!

⌨️ Keyboard Events

Keyboard events happen when users press keys on their keyboard.

They're often used in forms, games, or shortcuts.

Example:

document.addEventListener("keydown", (event) => {
    console.log("Key pressed:", event.key);
});

document.addEventListener("keyup", (event) => {
    console.log("Key released:", event.key);
});

Key pressed: a
Key released: a

🧾 Form Events

Forms have their own events — they're essential for validating input and handling data without refreshing the page.

💡 Example: Prevent Default Submission

<form id="userForm">
  <input type="text" placeholder="Enter name" id="nameInput" />
  <button type="submit">Submit</button>
</form>

const form = document.getElementById("userForm");

form.addEventListener("submit", (event) => {
    event.preventDefault(); // Prevents form refresh
    console.log("Form submitted!");
});

Form submitted!

💡 Always use event.preventDefault() when handling form data in JavaScript — it stops the browser from reloading the page.

Example: Input Events

const input = document.getElementById("nameInput");

input.addEventListener("input", () => {
    console.log("Value changed:", input.value);
});

Value changed: Brayan

Every keystroke triggers the event in real time.

🧠 The Event Object

Whenever an event happens, JavaScript automatically passes an event object to the callback function.

It contains details about the event, like:

• • The element that triggered it (event.target)
• • The event type (event.type)
• • Mouse position, pressed key, etc.

document.addEventListener("click", (event) => {
    console.log("Clicked element:", event.target);
    console.log("Event type:", event.type);
});

Clicked element: <button id="mouseBtn">Hover or Click</button>
Event type: click

Example: Stopping Default Behavior

Some elements (like links or forms) have default behaviors.

You can stop those actions using event.preventDefault().

<a href="https://google.com" id="link">Go to Google</a>

const link = document.getElementById("link");

link.addEventListener("click", (event) => {
    event.preventDefault();
    console.log("Default action stopped!");
});

🟢 Result: The link won't open, but the message will appear in the console.

🎮 Interactive Example — Key Tracker

Let's create a simple program that displays which key the user pressed.

<h2>Press any key!</h2>
<p id="displayKey">Waiting for input...</p>

🟢 Output (on the page):

You pressed: a

🧩 Example — Change Background on Click

<button id="colorBtn">Change Background</button>

const colorBtn = document.getElementById("colorBtn");

colorBtn.addEventListener("click", () => {
    document.body.style.backgroundColor =
        document.body.style.backgroundColor === "lightblue"
            ? "white"
            : "lightblue";
});

🟢 Result: The background toggles each time you click the button!

⚙️ Window Events

The window object represents the browser window itself.

You can detect changes like loading, resizing, or scrolling.

Example: Page Load

window.addEventListener("load", () => {
    console.log("Page fully loaded!");
});

Example: Window Resize

window.addEventListener("resize", () => {
    console.log("Window resized to:", window.innerWidth, "x", window.innerHeight);
});

Example: Scroll Event

window.addEventListener("scroll", () => {
    console.log("You scrolled!");
});

📚 Common Event Types Reference

🖱️ Mouse Events

• click — Element clicked
• dblclick — Double-clicked
• mouseenter — Mouse enters element
• mouseleave — Mouse leaves
• mousemove — Mouse moves

⌨️ Keyboard Events

• keydown — Key pressed
• keyup — Key released
• keypress — Deprecated

🧾 Form Events

• submit — Form submitted
• input — While typing
• change — Value changed
• focus — Element focused
• blur — Element loses focus

🌍 Window Events

• load — Page loaded
• resize — Window resized
• scroll — Page scrolled

🎯 Practice Challenge

Create event handlers for the following:

1️⃣ A click event that logs a message

button.addEventListener("click", () => {
    console.log("Button clicked!");
});

2️⃣ A keyboard event that detects specific keys

document.addEventListener("keydown", (e) => {
    if (e.key === "Enter") {
        console.log("You pressed Enter!");
    }
});

3️⃣ A form submission that prevents default behavior

form.addEventListener("submit", (e) => {
    e.preventDefault();
    console.log("Form submission prevented!");
});

4️⃣ Use the event object to log event properties

element.addEventListener("click", (event) => {
    console.log("Target:", event.target);
    console.log("Type:", event.type);
});

• • Create a counter that increments on button click
• • Build a color picker that changes background on key press
• • Make a form with real-time validation as users type
• • Create a scroll progress indicator

💬 Recap

• ✅ Events make web pages interactive and dynamic
• ✅ addEventListener() is the modern way to handle all event types
• ✅ The event object provides detailed information
• ✅ Use preventDefault() to stop browser defaults
• ✅ Combine multiple events to create smooth user experiences

Every interactive feature — from pressing Play on YouTube to typing in a search bar — starts with a JavaScript event.

Mastering events turns you from a coder into a true frontend developer!

End of Lesson: JavaScript Events

📋 Quick Reference — JavaScript Events

Lesson Complete — JavaScript Events!

You can now make web pages respond to user interactions — clicks, typing, scrolling, and form submissions!

Practice quiz

Continue this course

• Previous: DOM Manipulation
• Next: Arrays and Objects — Store lists and structured data, and loop through them efficiently
• Quick reference: JavaScript cheat sheet › DOM
• From the blog: Understanding the DOM in JavaScript · Understanding JavaScript Closures · How to Learn to Code Fast (Without Burning Out)