Events

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

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

Event Type

When It Fires

Common Use

click

User clicks element

Buttons, links, cards

keydown

User presses a key

Keyboard shortcuts, games

submit

Form is submitted

Login, search forms

mouseover

Mouse hovers element

Tooltips, previews

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

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:

🧠 Example: Button Click

🖱️ Mouse Events

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

Event

Description

When the element is clicked

dblclick

Double-click event

mouseenter

When the cursor enters the element

mouseleave

When the cursor leaves the element

mousemove

Fires repeatedly as the mouse moves

🧩 Example:

⌨️ Keyboard Events

Keyboard events happen when users press keys on their keyboard.

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

Fires when a key is pressed down

keyup

Fires when a key is released

keypress

Deprecated — use keydown instead

Example:

🧾 Form Events

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

Triggered when form is submitted

input

Fires while the user is typing

change

Fires when an input value changes (after losing focus)

focus

When an input gets focus

blur

When an input loses focus

💡 Example: Prevent Default Submission

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

Example: Input Events

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.

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

Example: Stopping Default Behavior

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

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

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

🧩 Example — Change Background on Click

🟢 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

Example: Window Resize

Example: Scroll Event

📚 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

1️⃣ A click event that logs a message

2️⃣ A keyboard event that detects specific keys

3️⃣ A form submission that prevents default behavior

4️⃣ Use the event object to log event properties

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

Next up: Learn how to work with Arrays & Objects to manage data! 📦

📋 Quick Reference — JavaScript Events

Key is pressed

User types into field

addEventListener

el.addEventListener('click', fn)

Lesson 5 Complete — JavaScript Events!

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

Up next: Arrays & Objects — the two most important data structures in JavaScript! 📦

Practice quiz

Continue this course

• Previous: DOM Manipulation
• Next: Arrays & Objects