Is JavaScript free to learn?

Yes. Every JavaScript lesson on CodeMaster is completely free, with no ads. No login required to read the concept notes.

Can beginners follow JavaScript?

Yes. Each lesson goes concept explanation → code example → interactive demo → quick quiz, so you can follow with no prior knowledge.

How long does JavaScript take?

Each lesson is about 30–60 minutes. At 1–2 lessons a day you can finish the whole category in roughly 1–2 months.

Events — Responding to User Input

🎯 By the end of this lesson

After reading this lesson, you will be able to confidently do the following 3 things.

▸✅ Event capturing, bubbling, and delegation patterns
▸✅ Memory leaks from missing addEventListener cleanup
▸✅ When to apply debounce / throttle

Keep these learning goals as a checklist — once you can answer all of them, close the lesson.

The Event System

The Core in One Line

Events = signals that fire when the user does something. Clicks, key presses, scrolls, mouse movements, etc. JS receives these signals and acts.

10 Commonly Used Events

Event	When
`click`	Click
`dblclick`	Double-click
`submit`	Form submission
`input`	Input change (real-time)
`change`	Input complete (on blur)
`keydown` / `keyup`	Key press / release
`focus` / `blur`	Focus gained / lost
`mouseover` / `mouseout`	Mouse enter / leave
`scroll`	Scroll
`load` / `DOMContentLoaded`	Page load complete

Event Listeners

javascript

const btn = document.querySelector('#submit');

// Add
const handler = (e) => console.log("Click!");
btn.addEventListener('click', handler);

// Remove
btn.removeEventListener('click', handler);   // Same function reference needed

> 💡 Inline onclick="..." is the old way. addEventListener is recommended — supports multiple handlers and removal.

The Event Object

javascript

input.addEventListener('input', (e) => {
    console.log(e.target.value);   // Current input value
    console.log(e.type);            // 'input'
});

button.addEventListener('click', (e) => {
    console.log(e.target);          // Clicked element
    console.log(e.clientX, e.clientY);  // Mouse coordinates
});

document.addEventListener('keydown', (e) => {
    console.log(e.key);             // 'Enter', 'Escape', 'a', etc.
    if (e.key === 'Enter') submit();
    if (e.ctrlKey && e.key === 's') save();   // Shortcut key
});

Preventing Default Behavior

javascript

form.addEventListener('submit', (e) => {
    e.preventDefault();   // Prevent page refresh
    // Handle directly
});

link.addEventListener('click', (e) => {
    e.preventDefault();   // Prevent link navigation
    showModal();
});

Event Propagation — Bubbling

html

<div id="parent">
    <button id="child">Button</button>
</div>

javascript

const parent = document.querySelector('#parent');
const child  = document.querySelector('#child');

parent.addEventListener('click', () => console.log("parent"));
child .addEventListener('click', () => console.log("child"));

// 🖱️ When button (child) is clicked, output order:
//   "child"     ← ① First, the clicked element itself
//   "parent"    ← ② "Bubbles" up to the parent
//
// 💡 Clicks start at the child → propagate "up" to parent → ancestor.
//    This is bubbling. The parent also hears the child's click.

Events propagate upward from child to parent. This is called bubbling.

Stopping propagation:

javascript

child.addEventListener('click', (e) => {
    e.stopPropagation();   // No propagation to parent
});

Event Delegation — An Efficient Pattern

html

<ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <!-- 1000 more -->
</ul>

1,000 listeners on each <li>? Inefficient. Instead, one listener on the parent:

javascript

document.querySelector('#list').addEventListener('click', (e) => {
    if (e.target.tagName === 'LI') {
        console.log(e.target.textContent);
    }
});

Thanks to bubbling, the parent detects clicks on its children. Better memory and performance. Dynamically added children are handled automatically too.

debounce · throttle — Preventing Excessive Calls

javascript

// 🐢 debounce — runs *only after N ms of silence following the last call*
function debounce(fn, ms) {
    let timer;                                    // Remember timer with closure
    return (...args) => {
        clearTimeout(timer);                      // Cancel previous reservation!
        timer = setTimeout(() => fn(...args), ms); // New reservation after N ms
    };
}

// Usage example: search input — fetch only when no additional input for 300 ms
const search = debounce((q) => {
    fetch(`/api/search?q=${q}`);
}, 300);

const input = document.querySelector('#search');
input.addEventListener('input', e => search(e.target.value));

// 📊 Effect:
//   User types "hello" (5 characters) → 5 input events occur
//   Without debounce → fetch called 5 times (wasteful)
//   With debounce 300ms → 300ms after last input → fetch 1 time

In a search field, the API is called only once, 300ms after typing ends. 1,000 keystrokes → 1 API call.

Summary

▸addEventListener('type', handler) is the standard
▸e.preventDefault() blocks default browser behavior
▸e.stopPropagation() stops bubbling
▸Event delegation handles dynamic children efficiently
▸debounce · throttle optimize performance

⚡ Try It Yourself — Event System (mock EventTarget)

Due to browser sandbox restrictions, this demo uses a *mock EventTarget* to illustrate addEventListener, dispatchEvent, preventDefault, and bubbling.

✏️ JS 코드

// 🧪 mock EventTarget — mimics real browser event system
function makeEventTarget(name) {
  const listeners = new Map();
  return {
    name,
    addEventListener(type, fn) {
      if (!listeners.has(type)) listeners.set(type, []);
      listeners.get(type).push(fn);
      console.log(`  [${name}] addEventListener('${type}')`);
    },
    removeEventListener(type, fn) {
      const arr = listeners.get(type) || [];
      const i = arr.indexOf(fn);
      if (i >= 0) arr.splice(i, 1);
      console.log(`  [${name}] removeEventListener('${type}')`);
    },
    dispatch(type, eventData = {}) {
      const event = {
        type,
        target: this,
        defaultPrevented: false,
        propagationStopped: false,
        preventDefault() { this.defaultPrevented = true; console.log(`    └ preventDefault() called`); },
        stopPropagation() { this.propagationStopped = true; console.log(`    └ stopPropagation() called`); },
        ...eventData
      };
      console.log(`  [${name}] dispatch('${type}')`);
      (listeners.get(type) || []).forEach(fn => fn(event));
      return event;
    }
  };
}

const button = makeEventTarget('button');
const parent = makeEventTarget('parent');

console.log('=== 1) Register handler + dispatch ===');
const handler = (e) => console.log('    👉 Click received! target =', e.target.name);
button.addEventListener('click', handler);
button.dispatch('click');

console.log('\n=== 2) Using event object ===');
button.addEventListener('keydown', (e) => {
  console.log(`    👉 Key input: ${e.key} (Ctrl: ${e.ctrlKey})`);
  if (e.key === 'Enter') e.preventDefault();
});
button.dispatch('keydown', { key: 'Enter', ctrlKey: false });
button.dispatch('keydown', { key: 'a',     ctrlKey: true });

console.log('\n=== 3) preventDefault — Block default action ===');
const form = makeEventTarget('form');
form.addEventListener('submit', (e) => {
  console.log('    👉 Intercept submit');
  e.preventDefault();
});
const result = form.dispatch('submit');
console.log('  → defaultPrevented:', result.defaultPrevented, '(if true, refresh prevented)');

console.log('\n=== 4) Remove handler ===');
button.removeEventListener('click', handler);
button.dispatch('click');   // No output because handler is gone
console.log('  → "Click received" not printed above (handler removed)');

console.log('\n💡 In a real browser, e.target = HTMLElement, e.clientX/Y, etc. are also available.');

📟 Console output

                ▶ Press the Run button
              

⚠️ Runs in a browser sandbox — only console.log() is supported; alert/fetch are not.

🤖 Try Asking AI This

Knowing the concepts in this lesson lets you give AI specific instructions. Instead of a vague 'fix this,' you can make vocabulary-driven requests — and that's where token savings begin.

▸"Apply debounce 300ms to this click event"
▸"Add cleanup to this event handler (return () => removeEventListener)"

Why This Saves Tokens

When you don't know the concepts, you have to follow up with 'What does that mean?' after every AI response. Those follow-up questions eat tokens. Learn the concept once, and the conversation finishes in one round.

Events — *Responding to User Input*

Events — *Responding to User Input*

🎯 By the end of this lesson

The Event System

The Core in One Line

10 Commonly Used Events

Event Listeners

The Event Object

Preventing Default Behavior

Event Propagation — Bubbling

Event Delegation — An Efficient Pattern

debounce · throttle — Preventing Excessive Calls

Summary

⚡ Try It Yourself — Event System (mock EventTarget)

🤖 Try Asking AI This

Why This Saves Tokens

Events — Responding to User Input

Events — Responding to User Input