Form and Document Events

Events: Form and Document Events 🎭

The Grand Theatre of Web Events

Imagine your web page is a magical theatre. The stage (your webpage) has many actors (buttons, forms, windows), and YOU are the director! When actors do something—like when the spotlight focuses on someone, or when the curtain opens—special signals called events tell you what’s happening.

Today, we’ll learn about special signals that come from:

1. Forms (like when someone types in a box)
2. The whole page (like when everything finishes loading)

🔦 Focus and Blur Events

The Spotlight Story

Think of a theatre spotlight. When an actor steps into the light, everyone looks at them—that’s FOCUS! When they step away and the light moves, that’s BLUR!

On a webpage:

• Focus = You clicked on something (like a text box) and it’s now “active”
• Blur = You clicked away, and it’s no longer “active”

Why Does This Matter?

When you type your name in a form:

1. You click the text box → focus event fires!
2. You type your name
3. You click somewhere else → blur event fires!

// When the spotlight hits the input
nameBox.addEventListener('focus', () => {
  console.log('Ready to type!');
});

// When the spotlight moves away
nameBox.addEventListener('blur', () => {
  console.log('Done typing!');
});

Real-Life Magic ✨

• Show a helpful hint when someone clicks a text box
• Check if someone typed their email correctly when they leave the box
• Highlight the box they’re currently using

📝 Input and Change Events

The Instant Reporter vs The Patient Reporter

Imagine two reporters watching you paint:

The Instant Reporter (input event):

“They added red! Now blue! Now a dot! Another dot!”

Reports every single brushstroke immediately!

The Patient Reporter (change event):

“They finished painting a flower.”

Only reports when you’re completely done and step back.

See The Difference

// Instant Reporter - fires with EVERY keystroke
textBox.addEventListener('input', () => {
  console.log('You typed: ' + textBox.value);
});

// Patient Reporter - fires when you finish
textBox.addEventListener('change', () => {
  console.log('Final answer: ' + textBox.value);
});

When to Use Which?

📬 Submit Event

The Envelope Moment

Remember mailing a letter? You:

1. Write the letter (fill the form)
2. Put it in an envelope
3. DROP IT IN THE MAILBOX ← This is the submit event!

The submit event fires when someone tries to send a form.

Why It’s Super Important

By default, submitting a form reloads the whole page (like the mailbox taking your letter away). But we can stop that!

form.addEventListener('submit', (event) => {
  // STOP! Don't reload the page!
  event.preventDefault();

  // Now WE handle the form data
  console.log('Form submitted safely!');
});

The Magic Spell: preventDefault()

graph TD
    A["User clicks Submit"] --> B{preventDefault used?}
    B -->|No| C["Page reloads 😵"]
    B -->|Yes| D["We control what happens! 🎉"]
    D --> E["Validate data"]
    D --> F["Send to server"]
    D --> G["Show success message"]

🏠 DOMContentLoaded

The House Building Story

Building a webpage is like building a house:

1. Foundation & Walls = HTML structure
2. Furniture & Decorations = Images, videos, fonts

DOMContentLoaded fires when the structure is ready—even before all the pretty pictures load!

Why Not Just Use “load”?

// Fires when structure is ready (FAST!)
document.addEventListener('DOMContentLoaded', () => {
  console.log('Structure ready!');
  // Can start making buttons work
});

Think of it this way:

• DOMContentLoaded = “The rooms exist, start arranging furniture!”
• load = “Every painting is hung, every plant is potted!”

When to Use It

graph TD
    A["HTML Parsing"] --> B["DOM Tree Built"]
    B --> C["DOMContentLoaded fires! 🎉"]
    C --> D["Safe to use JavaScript"]
    D --> E["Images still loading..."]
    E --> F["Everything loaded"]
    F --> G["load event fires"]

🖼️ Load Event

The Grand Opening

Remember the house? The load event fires when EVERYTHING is completely ready:

• All HTML ✓
• All CSS ✓
• All images ✓
• All fonts ✓

It’s like the grand opening of a store—nothing happens until every shelf is stocked!

Two Types of Load

// 1. When the ENTIRE page loads
window.addEventListener('load', () => {
  console.log('Everything is ready!');
});

// 2. When a SINGLE image loads
myImage.addEventListener('load', () => {
  console.log('This picture is ready!');
});

DOMContentLoaded vs Load

📜 Scroll Event

The Periscope

Imagine looking through a periscope (or a small window) at a very long scroll of paper. As you move the paper up and down, you see different parts.

The scroll event fires every time you move that paper!

Be Careful! ⚠️

Scroll events fire A LOT—like a hyperactive reporter:

“Scrolled! Scrolled! Scrolled! Scrolled!”

window.addEventListener('scroll', () => {
  console.log('Scrolled to: ' + window.scrollY);
});

Smart Scrolling Tips

Since scroll fires so often, be smart:

let isScrolling = false;

window.addEventListener('scroll', () => {
  if (!isScrolling) {
    isScrolling = true;

    // Do your work here
    console.log('Scroll position: ' + scrollY);

    setTimeout(() => {
      isScrolling = false;
    }, 100);
  }
});

Cool Things You Can Do

• Show a “back to top” button when scrolled down
• Make headers stick when you scroll past them
• Load more content when reaching the bottom

📐 Resize Event

The Magic Window

Imagine you have a magical window that can grow and shrink. Every time its size changes, a little bell rings. That’s the resize event!

window.addEventListener('resize', () => {
  console.log('Window size: ' +
    innerWidth + ' x ' + innerHeight);
});

Why Do We Need It?

Phones can rotate! Tablets can split-screen! Users can resize browser windows!

graph TD
    A["User rotates phone"] --> B["Window size changes"]
    B --> C["resize event fires"]
    C --> D["Rearrange layout"]
    D --> E["Everything fits perfectly!"]

Real Examples

• Adjust a game board when screen rotates
• Switch from mobile to desktop layout
• Resize charts and graphs

🎯 The Complete Event Timeline

graph TD
    A["Page starts loading"] --> B["HTML parsing..."]
    B --> C["DOM ready!"]
    C --> D["DOMContentLoaded 🎉"]
    D --> E["Images loading..."]
    E --> F["Everything ready!"]
    F --> G["load 🎉"]
    G --> H["User interacts..."]
    H --> I["focus/blur on inputs"]
    H --> J["input/change on typing"]
    H --> K["submit on forms"]
    H --> L["scroll while browsing"]
    H --> M["resize if window changes"]

🧠 Quick Memory Guide

🎮 You’re Ready!

Now you understand how to:

• Know when someone is typing (input/change)
• Know when they enter or leave a field (focus/blur)
• Catch form submissions (submit)
• Start your code at the right time (DOMContentLoaded/load)
• React to scrolling and resizing (scroll/resize)

You’re the director of your web theatre now. The actors are ready, the signals are clear, and the show can begin! 🎭✨