> Canonical URL: https://codingcat.dev/course/odin-web-development-foundations/lesson/javascript-fundamentals-variables-functions-and-dom-events

# JavaScript Fundamentals: Functions, Array Methods & DOM Event Delegation | The Odin Project 1: Web Development Foundations (HTML, CSS, Flexbox & JS Basics) | CodingCat.dev Course

[🧶 The Odin Project 1: Web Development Foundations (HTML, CSS, Flexbox & JS Basics)](/course/odin-web-development-foundations)Section 1.4 · Lesson 4 of 4[← Prev Lesson](/course/odin-web-development-foundations/lesson/css-box-model-cascade-and-flexbox-layout-engine)

# JavaScript Fundamentals: Functions, Array Methods & DOM Event Delegation

![JavaScript Fundamentals: Functions, Array Methods & DOM Event Delegation Architecture Diagram](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/2a156b81859e0c7d114d82adeb4cffc05e4d1bae-1280x720.jpg?w=1920&h=1080&q=82&fit=max&auto=format)[@CodingCatDev62.5K / 100K Subscribers Goal](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Subscribe on YouTube→](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Watch on YouTube App ↗](https://www.youtube.com/watch?v=wOKZ2Ko0nZU&list=PLbWnTzpJdmjs)

## 1. The 15-Second Hook

Attaching a separate click listener to five hundred list items wastes memory and breaks as soon as you insert a new item dynamically. Let's master JavaScript fundamentals and DOM event delegation.

## 2. Architecture Mental Model (Visual Diagram)

On the left, attaching individual listeners in a loop leaks memory and misses new DOM nodes. On the right, event bubbling lets a single parent listener handle clicks via target.closest.

## 3. Show Me the Code (src/dom-delegation.ts)

Copied! 🐾📄 src/dom-delegation.tstypescript

```
const list = document.querySelector("#lesson-list");

list?.addEventListener("click", (event) => {
  const target = event.target as HTMLElement;
  const btn = target.closest("[data-lesson-id]");
  if (!btn) return;
  btn.setAttribute("aria-pressed", "true");
});
```

In src/dom-delegation.ts, we attach one click listener to #lesson-list and use target.closest with a data-lesson-id selector to handle any button click safely.

## 4. Production Trade-Off Matrix

Comparing event delegation and textContent against loop listeners and raw innerHTML, delegation scales to thousands of items and prevents XSS vulnerabilities.

## 5. Verdict & AJ Pro-Tip

> AJ Pro-Tip: Always use element.textContent instead of element.innerHTML when inserting user-provided text into the DOM so malicious script tags are never executed.

That completes Odin Project Course 1: Web Development Foundations! Subscribe to CodingCat.dev and jump into Course 2: Git and GitHub Workflows.

✏️ Visual Architecture Diagram

## how this course connects together.

Follow AJ from first principles to production-ready architecture.

Let’s build it!✏️ Visual Diagram: The Odin Project 1: Web Development Foundations …✓ Good PatternVISUAL DIAGRAM[Diagram Walkthrough]Step-by-step diagram breakdown for The Odin Project 1: Web Development Foundations (HTML, CSS, Flexbox & JS Basics): JavaScript Fundamentals: Functions, Array Methods & DOM Event Delegation: start with Core Architecture & Implementation, implement The Odin Project 1: Web Development Foundations (HTML, CSS, Flexbox & JS Basics), and ship to production.AAA Contrast Verified[Course Outline](/course/odin-web-development-foundations)

## The Odin Project 1: Web Development Foundations (HTML, CSS, Flexbox & JS Basics)

4/41

### Core Architecture & Implementation

- [1.1How the Web Works: DNS, HTTP/3, TLS & Browser DevTools](/course/odin-web-development-foundations/lesson/how-the-web-works-http-dns-and-devtools)
- [1.2Semantic HTML5, Document Landmarks & the Accessibility Tree](/course/odin-web-development-foundations/lesson/semantic-html5-dom-tree-and-accessibility)
- [1.3CSS Box Model, Cascade Specificity & the Flexbox Layout Engine](/course/odin-web-development-foundations/lesson/css-box-model-cascade-and-flexbox-layout-engine)
- [1.4JavaScript Fundamentals: Functions, Array Methods & DOM Event Delegation▶](/course/odin-web-development-foundations/lesson/javascript-fundamentals-variables-functions-and-dom-events)

@CodingCatDev on YouTube62.5K / 100K

Subscribe for new course lessons and architecture deep dives every week.

[Subscribe for New Lessons →](https://www.youtube.com/@codingcatdev?sub_confirmation=1)