Download Document Object Model (DOM) – Complete Guide – Part 2 (2025) Course for Free

An event is not an isolated occurrence

Section introduction

The 2 phases of an event - capturing & bubbling

How to listen to an event during the capturing phase

Example - lets listen to an event during both phases

Example - capturing and bubbling using the for ... of loop

Who cares about capturing vs bubbling

How to stop event capturing and event bubbling

Example of stopPropagation()

Event Delegation Introduction

Box Challenge - intro

Box Challenge - build

What is the classList property

Box Challenge - solution

Box Challenge - perfecting our solution

Quote Challenge - intro

Quote Challenge - solution

Quote Challenge - build

List Challenge - intro

List Challenge - build

List Challenge - solution

What are we going to build

High level overview of the website structure

Building our website HTML

Coding the CSS for the header

Coding the CSS for the form and list section

DOM access methods, the forEach method, and nodes - quick recap

Removing items - the old school way

Removing items - using event bubbling and event delegation

Introduction to dealing with forms

Default behavior with forms and how to prevent the default behavior

Adding items to our list - creating elements dynamically

Adding items to our list - adding classes with the classList API

Hiding and un-hiding our shopping list

Recap of the different event listeners we've already dealt with

What is the toLowerCase() method

Accessing our li tags, and introduction to the Array.from() method

Accessing an input within a form element

Introduction to the Array.from() method

How does Array.from() work - some practical examples

Using forEach() to loop through our groceries array

Introduction to indexOf()

Using indexOf() method with Arrays

Using indexOf() method with Strings

Finishing off our search functionality

IMPROVEMENT clear the input text when the user clicks a button

IMPROVEMENT I want you to add tabs

What is the data attribute

IMPROVEMENT building our tabs (HTML + CSS)

Using the classList API to add dynamic classes to our heading tabs

IMPROVEMENT Showing and hiding our panels when the heading tab is clicked

IMPROVEMENT adding a button for our answer

Bonus lecture - where to next

Introduction - what is a DOM event

The 2 most important things when it comes to events

Inline Properties - brief introduction

Inline Event Listeners - brief introduction

addEventListener() method - brief introduction

Inline Event Listeners - detailed overview

A quick word on events

Summary - the 3 ways to add an event listener to HTML elements

Inline Event Listeners - TEST setup (part 2 of 3)

Inline Event Listeners - TEST introduction (part 1 of 3)

Inline Event Listeners - TEST solution (part 3 of 3)

Inline Properties - detailed overview

Inline Properties - TEST setup (part 2 of 3)

Inline Properties - TEST introduction (part 1 of 3)

Inline Properties - TEST solution (part 3 of 3)

addEventListener() method - detailed overview

Callback functions - a quick overview

addEventListener - TEST introduction (part 1 of 3)

addEventListener - TEST setup (part 2 of 3)

EXTRA lecture - 3 ways to define a color

addEventListener - TEST solution (part 3 of 3)

EXTRA lecture - digits, bytes and hexadecimal format

EXTRA lecture - toString() method