10.3 Events and Event Handling

📚 Learning Objectives

By the end of this section, you will:

• •Understand the event system in the browser
• •Add and remove event listeners
• •Work with the event object and its properties
• •Understand event propagation (bubbling and capturing)
• •Prevent default behaviors and stop propagation
• •Handle common event types

---

📖 Table of Contents

1. •Understanding Events
2. •Adding Event Listeners
3. •The Event Object
4. •Event Propagation
5. •Controlling Event Behavior
6. •Common Event Types

---

Understanding Events

What are Events?

┌──────────────────────────────────────────────────────────────────┐
│                    Browser Event System                          │
├──────────────────────────────────────────────────────────────────┤
│                                                                  │
│  User Action          Browser                   Your Code        │
│  ┌──────────┐        ┌──────────┐              ┌──────────┐     │
│  │  Click   │───────▶│  Event   │─────────────▶│ Handler  │     │
│  │  Type    │        │ Created  │              │ Function │     │
│  │  Scroll  │        └──────────┘              └──────────┘     │
│  │  etc.    │                                                    │
│  └──────────┘                                                    │
│                                                                  │
│  Events can be triggered by:                                     │
│  • User interactions (click, type, scroll)                       │
│  • Browser actions (load, resize, error)                         │
│  • API/Code (custom events)                                      │
│                                                                  │
└──────────────────────────────────────────────────────────────────┘

Event Categories

---

Adding Event Listeners

addEventListener Method

┌──────────────────────────────────────────────────────────────────┐
│                    addEventListener Syntax                        │
├──────────────────────────────────────────────────────────────────┤
│                                                                  │
│  element.addEventListener(type, handler, options)                │
│                           │     │        │                       │
│                           │     │        └─ Optional config      │
│                           │     └─ Function to call              │
│                           └─ Event name (string)                 │
│                                                                  │
│  Options object:                                                 │
│  {                                                               │
│      capture: false,    // Use capture phase                     │
│      once: false,       // Remove after first call               │
│      passive: false     // Never call preventDefault             │
│  }                                                               │
│                                                                  │
└──────────────────────────────────────────────────────────────────┘

Basic Event Listener

const button = document.getElementById('myButton');

// Method 1: Named function
function handleClick(event) {
  console.log('Button clicked!', event);
}
button.addEventListener('click', handleClick);

// Method 2: Anonymous function
button.addEventListener('click', function (event) {
  console.log('Clicked!');
});

// Method 3: Arrow function
button.addEventListener('click', (event) => {
  console.log('Arrow function handler');
});

Removing Event Listeners

const button = document.getElementById('myButton');

function handleClick() {
  console.log('Clicked!');
}

// Add listener
button.addEventListener('click', handleClick);

// Remove listener (must use same function reference)
button.removeEventListener('click', handleClick);

// ❌ This won't work - different function references
button.addEventListener('click', function () {
  console.log('A');
});
button.removeEventListener('click', function () {
  console.log('A');
});

Using Options

const button = document.getElementById('myButton');

// Run only once
button.addEventListener(
  'click',
  () => {
    console.log('This runs only once!');
  },
  { once: true }
);

// Passive listener (for performance in scroll/touch)
window.addEventListener('scroll', handleScroll, { passive: true });

// Capture phase listener
element.addEventListener('click', handler, { capture: true });
// OR shorthand:
element.addEventListener('click', handler, true);

Old Way vs Modern Way

// ❌ Old ways (avoid)
button.onclick = function() { };  // Only one handler possible
<button onclick="handler()">      // Inline (avoid)

// ✓ Modern way (recommended)
button.addEventListener("click", handler);  // Multiple handlers OK

---

The Event Object

Event Object Properties

┌──────────────────────────────────────────────────────────────────┐
│                    Event Object Properties                        │
├──────────────────────────────────────────────────────────────────┤
│                                                                  │
│  General Properties:                                             │
│  ├── type           → Event type ("click", "keydown", etc.)      │
│  ├── target         → Element that triggered the event           │
│  ├── currentTarget  → Element handler is attached to             │
│  ├── timeStamp      → When event was created                     │
│  └── isTrusted      → User action (true) or script (false)       │
│                                                                  │
│  Mouse Event Properties:                                         │
│  ├── clientX/Y      → Coordinates relative to viewport           │
│  ├── pageX/Y        → Coordinates relative to document           │
│  ├── offsetX/Y      → Coordinates relative to target element     │
│  ├── screenX/Y      → Coordinates relative to screen             │
│  ├── button         → Which mouse button (0, 1, 2)               │
│  └── buttons        → Pressed buttons (bitfield)                 │
│                                                                  │
│  Keyboard Event Properties:                                      │
│  ├── key            → Key value ("a", "Enter", "ArrowUp")        │
│  ├── code           → Physical key ("KeyA", "Enter")             │
│  ├── altKey         → Alt key pressed?                           │
│  ├── ctrlKey        → Ctrl key pressed?                          │
│  ├── shiftKey       → Shift key pressed?                         │
│  └── metaKey        → Meta (Cmd/Win) key pressed?                │
│                                                                  │
└──────────────────────────────────────────────────────────────────┘

Using Event Properties

// Mouse event example
element.addEventListener('click', (event) => {
  console.log('Event type:', event.type);
  console.log('Target element:', event.target);
  console.log('Current target:', event.currentTarget);
  console.log('Viewport position:', event.clientX, event.clientY);
  console.log('Page position:', event.pageX, event.pageY);
});

// Keyboard event example
document.addEventListener('keydown', (event) => {
  console.log('Key pressed:', event.key);
  console.log('Key code:', event.code);
  console.log('Shift held:', event.shiftKey);
  console.log('Ctrl held:', event.ctrlKey);

  // Check for keyboard shortcuts
  if (event.ctrlKey && event.key === 's') {
    event.preventDefault();
    console.log('Ctrl+S pressed');
  }
});

target vs currentTarget

┌──────────────────────────────────────────────────────────────────┐
│                  target vs currentTarget                          │
├──────────────────────────────────────────────────────────────────┤
│                                                                  │
│  HTML:                                                           │
│  <div id="parent">                                               │
│      <button id="child">Click</button>                           │
│  </div>                                                          │
│                                                                  │
│  JavaScript:                                                     │
│  parent.addEventListener("click", (e) => {                       │
│      console.log(e.target);        // <button> (clicked element) │
│      console.log(e.currentTarget); // <div> (listener element)   │
│  });                                                             │
│                                                                  │
│  When clicking the button:                                       │
│  • target = button (what you clicked)                            │
│  • currentTarget = div (where listener is attached)              │
│                                                                  │
└──────────────────────────────────────────────────────────────────┘

---

Event Propagation

Phases of Event Propagation

┌─────────────────────────────────────────────────────────────────────┐
│                    Event Propagation Phases                          │
├─────────────────────────────────────────────────────────────────────┤
│                                                                     │
│           ┌────────────────────────────────────────┐                │
│           │              Document                   │                │
│           │  ┌──────────────────────────────────┐  │                │
│           │  │              <html>               │  │                │
│           │  │  ┌────────────────────────────┐  │  │                │
│           │  │  │           <body>            │  │  │                │
│           │  │  │  ┌──────────────────────┐  │  │  │                │
│           │  │  │  │        <div>         │  │  │  │                │
│           │  │  │  │  ┌──────────────┐   │  │  │  │                │
│           │  │  │  │  │   <button>   │   │  │  │  │                │
│    1      │  │  │  │  │    CLICK!    │   │  │  │  │     3          │
│ Capture   │  │  │  │  └──────────────┘   │  │  │  │  Bubble        │
│   Down    │  │  │  └──────────────────────┘  │  │  │    Up          │
│    ↓      │  │  └────────────────────────────┘  │  │    ↑           │
│           │  └──────────────────────────────────┘  │                │
│           └────────────────────────────────────────┘                │
│                                                                     │
│  Phase 1: CAPTURING - Event travels DOWN from window to target      │
│  Phase 2: TARGET - Event reaches the target element                 │
│  Phase 3: BUBBLING - Event travels UP from target to window         │
│                                                                     │
│  By default, handlers run in BUBBLING phase                         │
│  Use { capture: true } to run in CAPTURING phase                    │
│                                                                     │
└─────────────────────────────────────────────────────────────────────┘

Bubbling Example

// HTML: <div><p><span>Click me</span></p></div>

document.querySelector('span').addEventListener('click', () => {
  console.log('1. span clicked'); // Runs first
});

document.querySelector('p').addEventListener('click', () => {
  console.log('2. p clicked'); // Runs second
});

document.querySelector('div').addEventListener('click', () => {
  console.log('3. div clicked'); // Runs third
});

// Clicking the span outputs:
// 1. span clicked
// 2. p clicked
// 3. div clicked

Capturing Example

// Add listeners in capture phase
document.querySelector('div').addEventListener(
  'click',
  () => {
    console.log('1. div (capture)');
  },
  true
); // capture: true

document.querySelector('p').addEventListener(
  'click',
  () => {
    console.log('2. p (capture)');
  },
  true
);

document.querySelector('span').addEventListener('click', () => {
  console.log('3. span (target)');
});

// Clicking the span outputs:
// 1. div (capture)    - capture phase
// 2. p (capture)      - capture phase
// 3. span (target)    - target phase

---

Controlling Event Behavior

preventDefault()

// Prevent default link behavior
link.addEventListener('click', (event) => {
  event.preventDefault();
  console.log('Link click prevented');
});

// Prevent form submission
form.addEventListener('submit', (event) => {
  event.preventDefault();
  console.log('Form submission prevented');
  // Handle form data with JavaScript instead
});

// Prevent right-click context menu
element.addEventListener('contextmenu', (event) => {
  event.preventDefault();
  showCustomMenu(event.clientX, event.clientY);
});

stopPropagation()

// Prevent event from bubbling up
innerElement.addEventListener('click', (event) => {
  event.stopPropagation();
  console.log("Click handled here, won't bubble");
});

// Outer handler won't run if inner calls stopPropagation
outerElement.addEventListener('click', () => {
  console.log("This won't run if inner element is clicked");
});

stopImmediatePropagation()

// Stop all other handlers, even on same element
element.addEventListener('click', (event) => {
  console.log('Handler 1');
  event.stopImmediatePropagation();
});

element.addEventListener('click', () => {
  console.log("Handler 2 - won't run!");
});

Comparison Table

---

Common Event Types

Mouse Events

const element = document.getElementById('target');

// Click events
element.addEventListener('click', (e) => console.log('Single click'));
element.addEventListener('dblclick', (e) => console.log('Double click'));

// Mouse button events
element.addEventListener('mousedown', (e) => console.log('Mouse button down'));
element.addEventListener('mouseup', (e) => console.log('Mouse button up'));

// Mouse movement
element.addEventListener('mousemove', (e) => {
  console.log(`Mouse at: ${e.clientX}, ${e.clientY}`);
});

// Enter/leave (don't bubble)
element.addEventListener('mouseenter', (e) => console.log('Mouse entered'));
element.addEventListener('mouseleave', (e) => console.log('Mouse left'));

// Over/out (bubble)
element.addEventListener('mouseover', (e) => console.log('Mouse over'));
element.addEventListener('mouseout', (e) => console.log('Mouse out'));

Keyboard Events

// Modern keyboard handling
document.addEventListener('keydown', (event) => {
  // Use event.key for character
  console.log('Key:', event.key);

  // Use event.code for physical key
  console.log('Code:', event.code);

  // Common checks
  if (event.key === 'Enter') {
    console.log('Enter pressed');
  }

  if (event.key === 'Escape') {
    console.log('Escape pressed');
  }

  // Arrow keys
  if (event.key.startsWith('Arrow')) {
    console.log('Arrow key:', event.key);
  }

  // Keyboard shortcuts
  if (event.ctrlKey && event.key === 's') {
    event.preventDefault();
    saveDocument();
  }
});

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

Form Events

const form = document.getElementById('myForm');
const input = document.getElementById('email');

// Form submission
form.addEventListener('submit', (event) => {
  event.preventDefault();
  const formData = new FormData(form);
  console.log('Form submitted:', Object.fromEntries(formData));
});

// Input events
input.addEventListener('input', (event) => {
  console.log('Value changed:', event.target.value);
});

input.addEventListener('change', (event) => {
  console.log('Input changed (on blur):', event.target.value);
});

// Focus events
input.addEventListener('focus', () => console.log('Input focused'));
input.addEventListener('blur', () => console.log('Input blurred'));

Window/Document Events

// Page load
window.addEventListener('DOMContentLoaded', () => {
  console.log('DOM ready (HTML parsed)');
});

window.addEventListener('load', () => {
  console.log('Page fully loaded (including images)');
});

// Before leaving page
window.addEventListener('beforeunload', (event) => {
  event.preventDefault();
  event.returnValue = ''; // Show confirmation dialog
});

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

// Scroll
window.addEventListener('scroll', () => {
  console.log('Scroll position:', window.scrollY);
});

---

Event Flow Summary

┌─────────────────────────────────────────────────────────────────────┐
│                        Event Handling Summary                        │
├─────────────────────────────────────────────────────────────────────┤
│                                                                     │
│  Adding Listeners:                                                  │
│  • element.addEventListener(type, handler)     // Standard          │
│  • element.addEventListener(type, handler, options)  // With options│
│                                                                     │
│  Removing Listeners:                                                │
│  • element.removeEventListener(type, handler)  // Same reference!   │
│                                                                     │
│  Event Object:                                                      │
│  • e.target         - Element that triggered event                  │
│  • e.currentTarget  - Element with the listener                     │
│  • e.type           - Event type string                             │
│  • e.preventDefault()      - Stop default action                    │
│  • e.stopPropagation()     - Stop bubbling                          │
│                                                                     │
│  Propagation:                                                       │
│  • Capture → Target → Bubble                                        │
│  • Default handlers run in bubble phase                             │
│  • Use { capture: true } for capture phase                          │
│                                                                     │
└─────────────────────────────────────────────────────────────────────┘

---

💡 Key Takeaways

1. •Use addEventListener: Always prefer addEventListener over inline handlers
2. •Save Function References: To remove listeners, you need the same function reference
3. •Use Event Object: Access event details through the event parameter
4. •Understand Propagation: Events bubble up by default; use stopPropagation when needed
5. •Prevent Defaults Wisely: Only preventDefault when you're handling the action yourself

---

🔗 Next Steps

Continue to 10.4 Event Delegation to learn how to efficiently handle events for multiple elements.