Event-driven UI

Scheduled

Planned for Feb 5 – Delivered on TBD

Learning Outcome Guide

At the end of this class, you should be able to…

• Implement multiple event listeners to create dynamic user interfaces.
• Utilize event propagation techniques, including event bubbling and capturing.
• Develop interactive UI components that respond to user actions.

Additional Notes: Students must read chapter 11 of JSFBP

---

Coding Demo

In-Class Demo Jan 2026 term

To run the coding demo, you need to have your Student Workbook open in Visual Studio Code.

1. Open the terminal window and paste in the following.

   Run from the root of your repository

   pnpm dlx tiged --disable-cache --force DG-InClass/SDEV-1150-A04-Jan-2026/sk/lesson-09 ./src/lesson-09

2. Walk through the steps in the ReadMe.md of the new lesson.

---

Walkthrough

Complete the demo along with your instructor and then attempt the exercise prompts (see the comments in the main.js file).

This lesson demonstrates event propagation (bubbling vs capture), how to stop propagation, and using event delegation to build a small image viewer (gallery). Follow the short, incremental snippets below during the live demo and run the page after each change.

Propagation demo - Selecting required elements

const log = document.getElementById('log');
const outer = document.getElementById('outer');
const inner = document.getElementById('inner');
const button = document.getElementById('btn-propagate');

Propagation demo - Add listeners (outer, inner, button)

// Outer div - named function
function outerClick() {
  log.textContent += 'Outer clicked | ';
}

outer.addEventListener('click', outerClick);

// Inner div - anonymous function (bubbling)
inner.addEventListener('click', function () {
  log.textContent += 'Inner clicked | ';
});

// Button - stops propagation so outer/inner don't receive the click
button.addEventListener('click', (event) => {
  log.textContent += 'Button clicked | ';
});

Gallery demo - Selecting elements

const thumbnails = document.querySelector('.thumbnails');
const mainImage = document.getElementById('main-image');
const viewer = document.querySelector('.viewer');
const closeBtn = document.getElementById('close-viewer');

Gallery demo - Delegated thumbnail clicks

thumbnails.addEventListener('click', (event) => {
  // Only handle clicks on thumbnail images
  if (event.target.tagName === 'IMG') {
    mainImage.src = event.target.src;
    viewer.classList.add('show');
  }
});

Gallery demo - Close viewer

closeBtn.addEventListener('click', () => {
  viewer.classList.remove('show');
});

Student Exercise

Update the example by adding the ability for the user to close the viewer with by pressing the escape key.

Push to your GitHub workbook repo

Once you’re done making your own custom updates to the project, stage your files, commit your work, and push to the remote repository.

1. Open a terminal in VS Code
2. Stage all updated and created files:

git add .

3. Commit the changes:

git commit -m 'Lesson 9 Example'

4. Push your changes to the remote workbook repository:

git push origin main