Event Handling in JavaScript

Duration: 45 minutes

Module 1: DOM Manipulation

Learning Objectives

Understand JavaScript fundamentals
Add interactivity to web pages
Manipulate page elements dynamically
Handle user interactions

Introduction to Events

Events are actions or occurrences that happen in the system you are programming. The system notifies you when these events occur, so you can respond to them in some way if desired. For example, if a user clicks a button on a webpage, you might want to respond to that click event by displaying information.

Events as Conversations

Think of events like conversations between your webpage and its visitors. The user does something (clicks, types, scrolls), and that's like them saying something to your webpage. Event listeners are like your webpage's ears, waiting for specific phrases. When they hear one, they trigger a specific response (your event handler function).

Events are fundamental to creating interactive web applications. By learning how to handle events effectively, you'll be able to create responsive user interfaces that react to user interactions in meaningful ways.

Types of Events

There are dozens of different events that can occur in a web browser. Here are the most common categories:

Mouse Events

click - When an element is clicked
dblclick - When an element is double-clicked
mousedown - When a mouse button is pressed on an element
mouseup - When a mouse button is released over an element
mousemove - When the mouse is moved while it's over an element
mouseover - When the mouse enters an element
mouseout - When the mouse leaves an element
mouseenter - When the mouse enters an element (doesn't bubble)
mouseleave - When the mouse leaves an element (doesn't bubble)

Keyboard Events

keydown - When a key is pressed
keyup - When a key is released
keypress - When a key that produces a character is pressed (deprecated)

Form Events

submit - When a form is submitted
reset - When a form is reset
change - When an input element's value changes (on blur)
input - When an input element's value changes (immediately)
focus - When an element receives focus
blur - When an element loses focus
select - When text in an input field is selected

Document/Window Events

load - When a resource and its dependencies finish loading
DOMContentLoaded - When the HTML document is loaded and parsed
resize - When the window is resized
scroll - When the document or element is scrolled
error - When a resource fails to load
beforeunload - Before the document is about to be unloaded
unload - When the document is being unloaded

Touch Events

touchstart - When a touch point is placed on the touch surface
touchend - When a touch point is removed from the touch surface
touchmove - When a touch point is moved along the touch surface
touchcancel - When a touch point has been disrupted

When to Use Different Events

Use Case	Recommended Events	Example
Button interactions	`click`	Submit form, toggle panel, activate feature
Form validation	`input`, `change`, `submit`	Real-time feedback, submission handling
Drag-and-drop interfaces	`mousedown`, `mousemove`, `mouseup`	File uploads, sortable items, kanban boards
Hover effects	`mouseenter`, `mouseleave`	Tooltips, menu expansions, image zooms
Keyboard shortcuts	`keydown`	Navigation, accessibility features
Page initialization	`DOMContentLoaded`	Setup app state, initial data loading
Mobile interfaces	`touchstart`, `touchend`	Mobile navigation, swiping interfaces

Adding Event Handlers

There are several ways to attach event handlers to elements. Let's explore the different methods, from oldest to newest, along with their advantages and disadvantages.

Method 1: HTML Attribute Event Handlers

<!-- HTML inline event handlers -->
<button onclick="alert('Button clicked!')">Click Me</button>

<!-- Slightly better: calling a function -->
<button onclick="handleClick()">Click Me</button>

<script>
function handleClick() {
  alert('Button clicked!');
}
</script>

Pros:

Simple and easy to understand
Directly visible in the HTML

Cons:

Mixes HTML and JavaScript (poor separation of concerns)
Limited to one handler per event type per element
Difficult to manage for complex interactions
Can cause security issues if used with user input
Less maintainable for large applications

Method 2: DOM Property Event Handlers

<button id="myButton">Click Me</button>

<script>
// Select the button
const button = document.getElementById('myButton');

// Assign an event handler to the onclick property
button.onclick = function() {
  alert('Button clicked!');
};

// Can also use a named function
function handleClick() {
  alert('Button clicked in a named function!');
}

// Reassigning overwrites the previous handler
button.onclick = handleClick;
</script>

Pros:

Better separation of HTML and JavaScript
Simple syntax
Works in all browsers

Cons:

Still limited to one handler per event type per element
No easy way to remove event handlers
Cannot capture events (only bubbling phase)

Method 3: addEventListener (Modern Method)

<button id="myButton">Click Me</button>

<script>
// Select the button
const button = document.getElementById('myButton');

// Add event listener
button.addEventListener('click', function() {
  alert('First handler');
});

// Can add multiple handlers for the same event
button.addEventListener('click', function() {
  alert('Second handler');
});

// Using named functions
function handleClick() {
  alert('Named function handler');
}

button.addEventListener('click', handleClick);

// Can later remove specific listeners
button.removeEventListener('click', handleClick);

// Using options (third parameter)
button.addEventListener('click', function() {
  alert('Once only!');
}, { once: true });  // This handler runs only once

// Capture phase (events normally bubble up the DOM)
document.body.addEventListener('click', function() {
  alert('Captured in body before reaching the button!');
}, { capture: true });
</script>

Pros:

Multiple handlers for the same event type
Can add event handlers to groups of elements
Can remove specific event handlers
Supports both capturing and bubbling phases
Additional options (once, passive, signal)
Best practice in modern web development

Cons:

More verbose syntax
Need to store function references to remove listeners

Event Handling Methods as Communication Systems

The three methods of handling events are like different communication systems:

HTML attributes are like writing instructions directly on physical buttons ("Push here to open door"). Simple but limited.
DOM properties are like having a single dedicated phone line to each button. You can call the button, but only one person can be on the line at a time.
addEventListener is like a conference call system. Multiple people can listen and respond to the same call, you can opt-in or out of calls, and you have options for how you participate.

The Event Object

When an event occurs, the browser creates an Event object containing information about the event. This object is automatically passed to your event handler function.

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

button.addEventListener('click', function(event) {
  // 'event' is the Event object
  console.log('Event type:', event.type);  // "click"
  console.log('Target element:', event.target);  // The button element
  console.log('Current target:', event.currentTarget);  // Also the button element
  console.log('Mouse position:', event.clientX, event.clientY);  // Coordinates relative to viewport
});

// Using arrow function syntax
button.addEventListener('click', (event) => {
  console.log('Clicked at:', event.clientX, event.clientY);
});

Common Event Object Properties

Property	Description	Example
`type`	The type of event (e.g., "click", "mouseover")	`event.type`
`target`	The element that triggered the event	`event.target`
`currentTarget`	The element the event handler is attached to	`event.currentTarget`
`timeStamp`	The time when the event occurred	`event.timeStamp`
`bubbles`	Whether the event bubbles up through the DOM	`event.bubbles`
`cancelable`	Whether the event can be canceled	`event.cancelable`

Event-Specific Properties

Different event types have different properties:

Mouse Event Properties

clientX, clientY - Coordinates within the viewport
pageX, pageY - Coordinates relative to the document
screenX, screenY - Coordinates relative to the screen
altKey, ctrlKey, shiftKey, metaKey - Modifier key states
button - Which mouse button was pressed

Keyboard Event Properties

key - The key value (e.g., "a", "Enter")
code - The physical key code (e.g., "KeyA", "Enter")
keyCode - The key code (deprecated)
altKey, ctrlKey, shiftKey, metaKey - Modifier key states
repeat - Whether the key is being held down

Form Event Properties

value (on target) - The current value of the form element
checked (on target) - For checkboxes/radio buttons
selected (on target) - For select options

Common Event Methods

// Prevent default behavior
document.getElementById('myLink').addEventListener('click', function(event) {
  event.preventDefault();  // Prevents navigating to the link
  console.log('Link clicked, but navigation prevented');
});

// Stop event propagation (bubbling)
document.getElementById('innerButton').addEventListener('click', function(event) {
  event.stopPropagation();  // Prevents the event from bubbling up
  console.log('This event will not bubble to parent elements');
});

// Stop immediate propagation (stops other handlers on the same element)
element.addEventListener('click', function(event) {
  event.stopImmediatePropagation();
  console.log('No other click handlers on this element will run');
});

Event Object Visualization

Event Propagation

When an event occurs on an element that has parent elements (like a button inside a div inside the body), modern browsers run three different phases:

1. Capturing Phase

The event starts at the root (window) and moves down to the target element. Ancestors get notified before the target.

2. Target Phase

The event has reached the target element. Event handlers on the target are executed.

3. Bubbling Phase

The event bubbles up from the target to the root. Ancestors get notified after the target.

If we have a button inside a div inside the body, and we click the button:

Capturing Phase: Events travels from window → document → html → body → div → button
Target Phase: Event arrives at the button (target element)
Bubbling Phase: Event bubbles up from button → div → body → html → document → window

<!-- HTML structure -->
<div id="outer">
  <div id="middle">
    <button id="inner">Click Me</button>
  </div>
</div>

<script>
// Selecting elements
const outer = document.getElementById('outer');
const middle = document.getElementById('middle');
const inner = document.getElementById('inner');

// Bubbling phase handlers (default)
outer.addEventListener('click', function() {
  console.log('Outer div clicked - bubbling phase');
});

middle.addEventListener('click', function() {
  console.log('Middle div clicked - bubbling phase');
});

inner.addEventListener('click', function() {
  console.log('Button clicked - bubbling phase');
});

// Capturing phase handlers (third parameter is true)
outer.addEventListener('click', function() {
  console.log('Outer div clicked - capturing phase');
}, true);

middle.addEventListener('click', function() {
  console.log('Middle div clicked - capturing phase');
}, true);

inner.addEventListener('click', function() {
  console.log('Button clicked - capturing phase');
}, true);

// When you click the button, you'll see in the console:
// 1. "Outer div clicked - capturing phase"
// 2. "Middle div clicked - capturing phase"
// 3. "Button clicked - capturing phase"
// 4. "Button clicked - bubbling phase"
// 5. "Middle div clicked - bubbling phase"
// 6. "Outer div clicked - bubbling phase"
</script>

Practical Use of Event Propagation: Event Delegation

Event delegation is a technique where you attach a single event handler to a parent element instead of multiple handlers to individual children. It relies on event bubbling.

<!-- HTML structure -->
<ul id="task-list">
  <li>Task 1 <button class="delete">Delete</button></li>
  <li>Task 2 <button class="delete">Delete</button></li>
  <li>Task 3 <button class="delete">Delete</button></li>
  <!-- More items might be added dynamically -->
</ul>

<script>
// Inefficient approach: Add handler to each button
const deleteButtons = document.querySelectorAll('.delete');
deleteButtons.forEach(button => {
  button.addEventListener('click', function() {
    const li = this.parentElement;
    li.remove();
  });
});
// Problem: New buttons added later won't have the handler!

// Better approach: Event delegation
const taskList = document.getElementById('task-list');
taskList.addEventListener('click', function(event) {
  // Check if the clicked element is a delete button
  if (event.target.className === 'delete') {
    // Find the parent li element and remove it
    const li = event.target.closest('li');
    li.remove();
    
    console.log('Task deleted');
  }
});
// Advantage: Works for dynamically added buttons too!
</script>

Benefits of Event Delegation:

Memory efficiency: Fewer event handlers
Works with dynamically added elements
Less code maintenance
Cleaner implementation for large lists or tables

Event Propagation as a Company Hierarchy

Think of event propagation like information flowing through a company:

Capturing Phase: A message from the CEO (window) passes down through executives (document, html), managers (body, div), to finally reach an employee (the button).
Target Phase: The employee (button) receives and processes the message.
Bubbling Phase: The employee's response travels back up through managers, executives, and finally to the CEO.
stopPropagation(): Like saying "This information stops here. Don't tell my boss."

Practical Event Handling Examples

Example 1: Form Validation

<!-- HTML structure -->
<form id="signup-form">
  <div class="form-group">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required minlength="3">
    <span class="error" id="username-error"></span>
  </div>
  
  <div class="form-group">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    <span class="error" id="email-error"></span>
  </div>
  
  <div class="form-group">
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required minlength="8">
    <span class="error" id="password-error"></span>
  </div>
  
  <button type="submit">Sign Up</button>
</form>

<script>
// Form validation with event handling
document.addEventListener('DOMContentLoaded', function() {
  const form = document.getElementById('signup-form');
  const username = document.getElementById('username');
  const email = document.getElementById('email');
  const password = document.getElementById('password');
  
  const usernameError = document.getElementById('username-error');
  const emailError = document.getElementById('email-error');
  const passwordError = document.getElementById('password-error');
  
  // Username validation - input event for real-time feedback
  username.addEventListener('input', function() {
    if (username.validity.tooShort) {
      usernameError.textContent = 'Username must be at least 3 characters';
    } else {
      usernameError.textContent = '';
    }
  });
  
  // Email validation - when the user leaves the field
  email.addEventListener('blur', function() {
    if (email.validity.typeMismatch) {
      emailError.textContent = 'Please enter a valid email address';
    } else {
      emailError.textContent = '';
    }
  });
  
  // Password validation - with custom rules
  password.addEventListener('input', function() {
    if (password.value.length < 8) {
      passwordError.textContent = 'Password must be at least 8 characters';
    } else if (!/[A-Z]/.test(password.value)) {
      passwordError.textContent = 'Password must contain an uppercase letter';
    } else if (!/[0-9]/.test(password.value)) {
      passwordError.textContent = 'Password must contain a number';
    } else {
      passwordError.textContent = '';
    }
  });
  
  // Form submission - validate everything together
  form.addEventListener('submit', function(event) {
    let isValid = true;
    
    // Check username
    if (!username.value || username.value.length < 3) {
      usernameError.textContent = 'Username is required (min 3 characters)';
      isValid = false;
    }
    
    // Check email
    if (!email.value || email.validity.typeMismatch) {
      emailError.textContent = 'Valid email is required';
      isValid = false;
    }
    
    // Check password
    if (!password.value || password.value.length < 8 || 
        !/[A-Z]/.test(password.value) || !/[0-9]/.test(password.value)) {
      passwordError.textContent = 'Password must be at least 8 characters with a number and uppercase letter';
      isValid = false;
    }
    
    // If the form is not valid, prevent submission
    if (!isValid) {
      event.preventDefault();
    } else {
      alert('Form submitted successfully!');
      // In a real application, you would typically submit the form
      // or use fetch/AJAX to send the data to the server
    }
  });
});
</script>

Example 2: Image Gallery with Event Delegation

<!-- HTML structure -->
<div class="gallery-container">
  <div class="thumbnails" id="thumbnails">
    <img src="thumb1.jpg" data-full="image1.jpg" alt="Image 1" class="thumbnail">
    <img src="thumb2.jpg" data-full="image2.jpg" alt="Image 2" class="thumbnail">
    <img src="thumb3.jpg" data-full="image3.jpg" alt="Image 3" class="thumbnail">
    <img src="thumb4.jpg" data-full="image4.jpg" alt="Image 4" class="thumbnail">
  </div>
  
  <div class="full-image-container">
    <img id="full-image" src="image1.jpg" alt="Full size image">
    <div class="image-caption" id="image-caption">Image 1</div>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const thumbnailsContainer = document.getElementById('thumbnails');
  const fullImage = document.getElementById('full-image');
  const imageCaption = document.getElementById('image-caption');
  
  // Using event delegation for all thumbnails
  thumbnailsContainer.addEventListener('click', function(event) {
    // Check if we clicked on a thumbnail
    if (event.target.classList.contains('thumbnail')) {
      // Get the full image path from data attribute
      const fullImageSrc = event.target.getAttribute('data-full');
      const altText = event.target.getAttribute('alt');
      
      // Update the full image
      fullImage.src = fullImageSrc;
      fullImage.alt = altText;
      imageCaption.textContent = altText;
      
      // Remove 'active' class from all thumbnails
      const allThumbnails = thumbnailsContainer.querySelectorAll('.thumbnail');
      allThumbnails.forEach(thumb => thumb.classList.remove('active'));
      
      // Add 'active' class to the clicked thumbnail
      event.target.classList.add('active');
    }
  });
  
  // Add keyboard navigation with keydown event
  document.addEventListener('keydown', function(event) {
    const thumbnails = document.querySelectorAll('.thumbnail');
    const activeIndex = Array.from(thumbnails).findIndex(thumb => 
      thumb.classList.contains('active'));
    
    let newIndex;
    
    // Right arrow or Down arrow: next image
    if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
      newIndex = (activeIndex + 1) % thumbnails.length;
    }
    // Left arrow or Up arrow: previous image
    else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
      newIndex = (activeIndex - 1 + thumbnails.length) % thumbnails.length;
    } else {
      return; // Exit if not arrow key
    }
    
    // Simulate a click on the new thumbnail
    thumbnails[newIndex].click();
  });
  
  // Initialize the first thumbnail as active
  const firstThumbnail = thumbnailsContainer.querySelector('.thumbnail');
  if (firstThumbnail) {
    firstThumbnail.classList.add('active');
  }
});
</script>

Example 3: Drag and Drop Interface

<!-- HTML structure -->
<div class="todo-board">
  <div class="column" id="todo">
    <h2>To Do</h2>
    <div class="task" draggable="true" data-id="task1">Complete assignment</div>
    <div class="task" draggable="true" data-id="task2">Read chapter 5</div>
    <div class="task" draggable="true" data-id="task3">Prepare presentation</div>
  </div>
  
  <div class="column" id="in-progress">
    <h2>In Progress</h2>
  </div>
  
  <div class="column" id="done">
    <h2>Done</h2>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Get all draggable tasks and drop zones (columns)
  const tasks = document.querySelectorAll('.task');
  const columns = document.querySelectorAll('.column');
  
  let draggedTask = null;
  
  // Set up draggable tasks
  tasks.forEach(task => {
    // When drag starts
    task.addEventListener('dragstart', function(event) {
      draggedTask = task;
      
      // Add dragging class for styling
      task.classList.add('dragging');
      
      // Set data to transfer - required for Firefox
      event.dataTransfer.setData('text/plain', task.dataset.id);
      
      // Make it semi-transparent during drag
      setTimeout(() => {
        task.style.opacity = '0.5';
      }, 0);
    });
    
    // When drag ends
    task.addEventListener('dragend', function() {
      task.classList.remove('dragging');
      task.style.opacity = '1';
      draggedTask = null;
    });
  });
  
  // Set up drop zones (columns)
  columns.forEach(column => {
    // When a draggable element enters a valid drop target
    column.addEventListener('dragenter', function(event) {
      event.preventDefault();
      column.classList.add('drag-over');
    });
    
    // When dragging over a valid drop target
    column.addEventListener('dragover', function(event) {
      event.preventDefault(); // Necessary to allow dropping
      column.classList.add('drag-over');
    });
    
    // When leaving a valid drop target
    column.addEventListener('dragleave', function(event) {
      // Only remove drag-over if we're leaving the column (not entering a child)
      if (event.relatedTarget && !column.contains(event.relatedTarget)) {
        column.classList.remove('drag-over');
      }
    });
    
    // When dropping on a valid target
    column.addEventListener('drop', function(event) {
      event.preventDefault();
      column.classList.remove('drag-over');
      
      // Move the task to this column
      if (draggedTask) {
        column.appendChild(draggedTask);
        
        // In a real app, you would save the new status to a database
        console.log(`Task ${draggedTask.dataset.id} moved to ${column.id}`);
      }
    });
  });
});
</script>

Performance and Best Practices

Properly handling events is crucial for building performant web applications. Here are some best practices:

Event Delegation

Use event delegation when dealing with multiple similar elements:

// Instead of this (inefficient for many items)
document.querySelectorAll('.menu-item').forEach(item => {
  item.addEventListener('click', handleMenuClick);
});

// Use this (one handler for all menu items)
document.querySelector('.menu').addEventListener('click', function(event) {
  if (event.target.matches('.menu-item')) {
    handleMenuClick(event);
  }
});

Throttling and Debouncing

Limit the frequency of event handling for performance-intensive events:

// Debounce function: Execute callback after delay has elapsed
function debounce(callback, delay = 300) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      callback.apply(this, args);
    }, delay);
  };
}

// Throttle function: Execute callback at most once per limit
function throttle(callback, limit = 300) {
  let waiting = false;
  return function(...args) {
    if (!waiting) {
      callback.apply(this, args);
      waiting = true;
      setTimeout(() => {
        waiting = false;
      }, limit);
    }
  };
}

// Example: Debounce resize event
window.addEventListener('resize', debounce(function() {
  console.log('Window resized');
  // Update layout or calculations
}, 500));

// Example: Throttle scroll event
window.addEventListener('scroll', throttle(function() {
  console.log('Window scrolled');
  // Update something based on scroll position
}, 200));

Throttling and Debouncing Analogy

Debouncing is like waiting for a conversation to finish before responding. If someone keeps talking, you keep waiting. Only after they've stopped talking for a certain amount of time do you respond.

Throttling is like only responding every few minutes in a conversation, regardless of how much the other person keeps talking.

Remove Event Listeners When No Longer Needed

// Define the handler function (must be named to remove later)
function handleClick(event) {
  console.log('Button clicked');
  
  // Do something once
  
  // Then remove the listener
  this.removeEventListener('click', handleClick);
}

button.addEventListener('click', handleClick);

// For one-time events, you can also use the { once: true } option
button.addEventListener('click', function() {
  console.log('This handler runs exactly once');
}, { once: true });

Use Passive Event Listeners for Scroll Performance

// Modern browsers: Telling the browser you won't call preventDefault()
document.addEventListener('scroll', function() {
  // Scroll handler
}, { passive: true });

// This improves performance, especially on mobile devices

Avoid Inline Event Handlers

Don't use HTML attributes like onclick. They mix HTML and JavaScript, are harder to maintain, and have scope limitations.

Events in Modern Frameworks

While the core principles of event handling apply across all JavaScript applications, modern frameworks provide syntactic sugar and performance optimizations.

React Events

// React uses a synthetic event system
function Button() {
  const handleClick = (event) => {
    console.log('Button clicked', event);
    // event is a synthetic event, a cross-browser wrapper around the native event
  };
  
  return (
    <button onClick={handleClick}>
      Click Me
    </button>
  );
}

Vue Events

// Vue template syntax
<template>
  <button @click="handleClick">Click Me</button>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      console.log('Button clicked', event);
    }
  }
}
</script>

Angular Events

// Angular template binding
<button (click)="handleClick($event)">Click Me</button>

// In component class
handleClick(event: Event) {
  console.log('Button clicked', event);
}

Creating Custom Events

You can create your own custom events to build decoupled, event-driven architectures in JavaScript.

// Creating a custom event
const productAddedEvent = new CustomEvent('productAdded', {
  bubbles: true, // Allow event to bubble up
  detail: {      // Custom data
    productId: '12345',
    productName: 'Coffee Maker',
    price: 49.99
  }
});

// Dispatching the custom event
document.getElementById('add-to-cart-button').addEventListener('click', function() {
  // Add product to cart logic here
  
  // Then dispatch the event
  document.dispatchEvent(productAddedEvent);
});

// Listening for the custom event
document.addEventListener('productAdded', function(event) {
  console.log('Product added:', event.detail.productName);
  console.log('Price:', event.detail.price);
  
  // Update cart UI or show notification
  updateCartCounter();
  showAddedToCartMessage(event.detail.productName);
});

Benefits of Custom Events

Loose coupling: Components don't need direct references to each other
Scalability: Easy to add new functionality without modifying existing code
Multiple listeners: Many parts of the application can respond to the same event
Cleaner architecture: Helps maintain separation of concerns

Real-World Example: Shopping Cart System

// Cart Events Manager
class CartEvents {
  constructor() {
    this.events = {
      productAdded: 'cartProductAdded',
      productRemoved: 'cartProductRemoved',
      cartCleared: 'cartCleared',
      quantityChanged: 'cartQuantityChanged'
    };
  }
  
  dispatch(eventName, data) {
    const event = new CustomEvent(eventName, {
      bubbles: true,
      detail: data
    });
    document.dispatchEvent(event);
  }
}

// Cart functionality
class ShoppingCart {
  constructor() {
    this.items = [];
    this.events = new CartEvents();
  }
  
  addProduct(product) {
    // Add product to cart
    this.items.push(product);
    
    // Dispatch event
    this.events.dispatch(this.events.events.productAdded, {
      product: product,
      cartTotal: this.calculateTotal()
    });
  }
  
  removeProduct(productId) {
    // Remove product from cart
    this.items = this.items.filter(item => item.id !== productId);
    
    // Dispatch event
    this.events.dispatch(this.events.events.productRemoved, {
      productId: productId,
      cartTotal: this.calculateTotal()
    });
  }
  
  clearCart() {
    this.items = [];
    this.events.dispatch(this.events.events.cartCleared, {});
  }
  
  calculateTotal() {
    return this.items.reduce((total, item) => total + item.price, 0);
  }
}

// UI Module that updates the cart display
class CartUI {
  constructor() {
    this.cart = new ShoppingCart();
    this.setupEventListeners();
  }
  
  setupEventListeners() {
    // Listen for product added to cart
    document.addEventListener('cartProductAdded', this.handleProductAdded.bind(this));
    document.addEventListener('cartProductRemoved', this.handleProductRemoved.bind(this));
    document.addEventListener('cartCleared', this.handleCartCleared.bind(this));
    
    // Add to cart buttons
    document.querySelectorAll('.add-to-cart').forEach(button => {
      button.addEventListener('click', this.handleAddToCartClick.bind(this));
    });
  }
  
  handleAddToCartClick(event) {
    const button = event.target;
    const productId = button.dataset.productId;
    const productName = button.dataset.productName;
    const productPrice = parseFloat(button.dataset.productPrice);
    
    const product = {
      id: productId,
      name: productName,
      price: productPrice
    };
    
    this.cart.addProduct(product);
  }
  
  handleProductAdded(event) {
    const product = event.detail.product;
    const cartTotal = event.detail.cartTotal;
    
    // Update UI
    console.log(`Added: ${product.name} - Cart total: $${cartTotal.toFixed(2)}`);
    this.updateCartCounter();
    this.updateCartTotal(cartTotal);
    this.addProductToCartUI(product);
  }
  
  handleProductRemoved(event) {
    // Update UI
    const productId = event.detail.productId;
    const cartTotal = event.detail.cartTotal;
    
    this.removeProductFromCartUI(productId);
    this.updateCartTotal(cartTotal);
    this.updateCartCounter();
  }
  
  handleCartCleared() {
    // Clear cart UI
    document.getElementById('cart-items').innerHTML = '';
    this.updateCartTotal(0);
    this.updateCartCounter();
  }
  
  updateCartCounter() {
    const counter = document.getElementById('cart-counter');
    counter.textContent = this.cart.items.length;
  }
  
  updateCartTotal(total) {
    const totalElement = document.getElementById('cart-total');
    totalElement.textContent = `$${total.toFixed(2)}`;
  }
  
  addProductToCartUI(product) {
    const cartItems = document.getElementById('cart-items');
    const item = document.createElement('div');
    item.className = 'cart-item';
    item.dataset.productId = product.id;
    
    item.innerHTML = `
      ${product.name}
      $${product.price.toFixed(2)}
      
    `;
    
    // Add event listener to the remove button
    item.querySelector('.remove-item').addEventListener('click', (event) => {
      const productId = event.target.dataset.productId;
      this.cart.removeProduct(productId);
    });
    
    cartItems.appendChild(item);
  }
  
  removeProductFromCartUI(productId) {
    const item = document.querySelector(`.cart-item[data-product-id="${productId}"]`);
    if (item) {
      item.remove();
    }
  }
}

// Initialize the cart
document.addEventListener('DOMContentLoaded', () => {
  const cartUI = new CartUI();
});

Practice Exercises

Exercise 1: Interactive To-Do List

Create a to-do list application that allows users to:

Add new tasks with a form
Mark tasks as complete by clicking on them
Delete tasks with a delete button
Filter tasks (All, Active, Completed) using event delegation

Exercise 2: Image Carousel

Build an image carousel/slider that:

Shows one image at a time
Has next/previous buttons
Supports keyboard navigation (left/right arrow keys)
Has indicator dots showing the current position
Auto-advances every few seconds

Exercise 3: Interactive Form

Create a multi-step form that:

Has at least 3 steps/sections
Validates each section before proceeding
Shows validation errors in real-time
Allows navigation between completed steps
Submits all data at the end

Additional Resources

MDN Web Docs: Event - Comprehensive documentation on the Event interface
JavaScript.info: Events - In-depth tutorial on events
W3Schools: JavaScript Events - Basic event handling tutorial with examples
HTML DOM - Practical vanilla JavaScript DOM manipulation recipes

Key Takeaways

Events are actions or occurrences that happen in the browser that you can respond to in JavaScript.
The modern way to handle events is with addEventListener, which allows multiple handlers and more control.
The Event object contains information about the event and methods to control its behavior.
Event propagation has three phases: capturing, target, and bubbling.
Event delegation is a powerful pattern that leverages event bubbling to handle events for multiple elements with a single listener.
Performance optimization techniques like debouncing and throttling help manage high-frequency events.
Custom events allow you to create decoupled, event-driven architectures.

Course Progress

Learning Objectives

Introduction to Events

Events as Conversations

Types of Events

Mouse Events

Keyboard Events

Form Events

Document/Window Events

Touch Events

When to Use Different Events

Adding Event Handlers

Method 1: HTML Attribute Event Handlers

Pros:

Cons:

Method 2: DOM Property Event Handlers

Pros:

Cons:

Method 3: addEventListener (Modern Method)

Pros:

Cons:

Event Handling Methods as Communication Systems

The Event Object

Common Event Object Properties

Event-Specific Properties

Mouse Event Properties

Keyboard Event Properties

Form Event Properties

Common Event Methods

Event Object Visualization

Event Propagation

1. Capturing Phase

2. Target Phase

3. Bubbling Phase

Practical Use of Event Propagation: Event Delegation

Benefits of Event Delegation:

Event Propagation as a Company Hierarchy

Practical Event Handling Examples

Example 1: Form Validation

Example 2: Image Gallery with Event Delegation

Example 3: Drag and Drop Interface

Performance and Best Practices

Event Delegation

Throttling and Debouncing

Throttling and Debouncing Analogy

Remove Event Listeners When No Longer Needed

Use Passive Event Listeners for Scroll Performance

Avoid Inline Event Handlers

Events in Modern Frameworks

React Events

Vue Events

Angular Events

Creating Custom Events

Benefits of Custom Events

Real-World Example: Shopping Cart System

Practice Exercises

Exercise 1: Interactive To-Do List

Exercise 2: Image Carousel

Exercise 3: Interactive Form

Additional Resources

Key Takeaways