
Events are how the browser tells your code that something happened: a click, a key press, a form submission, a window resize. You attach a listener function with `addEventListener` and the browser calls it with an `event` object that describes what happened. This lesson runs in a browser; the earlier lessons run anywhere JavaScript runs.

<ExamplePair>
<ExampleProse>

`addEventListener` takes an event name and a handler function. The handler receives an `event` object. `event.target` is the element that was interacted with. `event.preventDefault()` stops the browser's default behavior - useful for links you want to handle in JavaScript without a page navigation.

</ExampleProse>
<ExampleCode>

```js
const button = document.querySelector("button");

button.addEventListener("click", (event) => {
  console.log("clicked:", event.target.textContent);
  // event.target is the element that was clicked
});

// Prevent default behavior (e.g. stop a link from navigating)
const link = document.querySelector("a.ajax-link");
link.addEventListener("click", (event) => {
  event.preventDefault();
  console.log("link click intercepted, no navigation");
  // handle it yourself instead
});
```

</ExampleCode>
</ExamplePair>

<ExamplePair>
<ExampleProse>

The `input` event fires on every keystroke as the user types. The `change` event fires when the element loses focus (blur) after its value changed. Use `input` for live feedback and `change` for "finished editing" behavior.

</ExampleProse>
<ExampleCode>

```js
const field = document.querySelector("input[type='text']");

// Fires on every keystroke
field.addEventListener("input", (event) => {
  console.log("current value:", event.target.value);
});

// Fires once when the field loses focus and the value changed
field.addEventListener("change", (event) => {
  console.log("committed value:", event.target.value);
});
```

</ExampleCode>
</ExamplePair>

<ExamplePair>
<ExampleProse>

`AbortController` is the modern way to remove a group of listeners at once. Pass the controller's `signal` to each `addEventListener` call, then call `controller.abort()` to remove them all. This is cleaner than tracking and calling `removeEventListener` for every single handler.

</ExampleProse>
<ExampleCode>

```js
function setupListeners(element) {
  const controller = new AbortController();
  const { signal } = controller;

  element.addEventListener("click", () => {
    console.log("clicked");
  }, { signal });

  element.addEventListener("keydown", (event) => {
    console.log("key pressed:", event.key);
  }, { signal });

  window.addEventListener("resize", () => {
    console.log("window resized");
  }, { signal });

  // Later: remove ALL listeners above with a single call
  function cleanup() {
    controller.abort();
  }

  return cleanup;
}

const removeAll = setupListeners(document.querySelector(".widget"));
// When the component is destroyed:
removeAll();
```

</ExampleCode>
</ExamplePair>

<InProduction>
A forgotten `removeEventListener` keeps the handler closure alive - along with everything the closure captures, including DOM nodes. This is one of the most common memory leak sources in single-page applications. Use an `AbortController` per component or lifecycle scope and call `.abort()` on teardown. The pattern pairs cleanly with framework cleanup hooks (React's `useEffect` return, Vue's `onUnmounted`).
</InProduction>


Attaching listeners, reading the event object, and cleaning up with AbortController to avoid the memory leaks that forgotten removeEventListener leaves behind.

Events


Form validation checks that user input meets your requirements before it is submitted. The browser handles common cases through HTML attributes alone; JavaScript steps in for cross-field rules, custom error messages, and live feedback. This lesson runs in a browser; the earlier lessons run anywhere JavaScript runs.

<ExamplePair>
<ExampleProse>

HTML provides built-in constraints through attributes like `required`, `type`, `minlength`, and `pattern`. The browser enforces them automatically when the form submits, shows native error bubbles, and exposes them via the `:invalid` CSS pseudo-class for styling.

</ExampleProse>
<ExampleCode>

```html
<form id="signup">
  <input
    type="email"
    name="email"
    required
    placeholder="you@example.com"
  />
  <input
    type="password"
    name="password"
    required
    minlength="8"
  />
  <button type="submit">Sign up</button>
</form>
```

```js
const form = document.querySelector("#signup");

// Check validity programmatically without submitting
console.log(form.checkValidity()); // false if any constraint fails

// Access individual field validity state
const emailField = form.querySelector("input[type='email']");
console.log(emailField.validity.valueMissing);   // true if empty
console.log(emailField.validity.typeMismatch);   // true if not a valid email
```

```css
/* Style invalid fields after the user interacts (not on page load) */
input:user-invalid {
  border-color: red;
}
```

</ExampleCode>
</ExamplePair>

<ExamplePair>
<ExampleProse>

`setCustomValidity` lets you inject your own error message into the browser's built-in validity system. Call it with a non-empty string to mark a field invalid, then call `reportValidity()` to show the error to the user. Clear it with an empty string once the field is valid again.

</ExampleProse>
<ExampleCode>

```js
const form = document.querySelector("#signup");
const password = form.querySelector("input[name='password']");
const confirm = form.querySelector("input[name='confirm']");

form.addEventListener("submit", (event) => {
  // Cross-field rule: passwords must match
  if (password.value !== confirm.value) {
    confirm.setCustomValidity("Passwords do not match.");
    confirm.reportValidity(); // shows the native error bubble
    event.preventDefault();   // stop the form from submitting
    return;
  }

  // Clear any previous custom error before submitting
  confirm.setCustomValidity("");
});
```

</ExampleCode>
</ExamplePair>

<ExamplePair>
<ExampleProse>

Live validation gives instant feedback as the user types. Running it on every `input` event can feel aggressive, especially for fields like email where the address isn't complete mid-type. A short debounce (waiting for a pause in typing) avoids false errors.

</ExampleProse>
<ExampleCode>

```js
const emailField = document.querySelector("input[type='email']");
const errorEl = document.querySelector("#email-error");

let debounceTimer;

emailField.addEventListener("input", () => {
  clearTimeout(debounceTimer);

  debounceTimer = setTimeout(() => {
    if (emailField.validity.typeMismatch || emailField.validity.valueMissing) {
      errorEl.textContent = "Enter a valid email address.";
      emailField.setAttribute("aria-describedby", "email-error");
    } else {
      errorEl.textContent = "";
      emailField.removeAttribute("aria-describedby");
    }
  }, 400); // wait 400 ms after the user stops typing
});
```

</ExampleCode>
</ExamplePair>

<InProduction>
Client-side validation is a UX feature, not a security control. Any user can open the browser console, remove the `required` attribute, and submit whatever they want. The server must re-validate every input before acting on it. When displaying errors, place the message next to the failing field and connect it with `aria-describedby` so screen readers announce the error context. Never use `alert()` for validation feedback - it blocks the UI and is inaccessible.
</InProduction>


Checking user input before submission - HTML-native constraints, JavaScript custom messages, and the server-must-re-validate rule that client validation never replaces.

Form Validation


The DOM (Document Object Model) is the live object representation of the HTML page that the browser builds when it parses HTML. JavaScript reads and mutates that tree to update the UI. This lesson runs in a browser; the earlier lessons run anywhere JavaScript runs.

<ExamplePair>
<ExampleProse>

`document.querySelector` finds the first element that matches a CSS selector. `querySelectorAll` returns a NodeList (not a true Array) of all matching elements. Convert a NodeList to an Array with `Array.from` when you need array methods like `.map` or `.filter`.

</ExampleProse>
<ExampleCode>

```js
// Select a single element
const heading = document.querySelector("h1");
console.log(heading.textContent); // "Hello, world"

// Select multiple elements
const items = document.querySelectorAll("ul li");
console.log(items.length); // 3 (a NodeList)

// Convert to Array to use array methods
const texts = Array.from(items).map((li) => li.textContent);
console.log(texts); // ["Item 1", "Item 2", "Item 3"]
```

</ExampleCode>
</ExamplePair>

<ExamplePair>
<ExampleProse>

`textContent` reads or replaces all text inside an element. `classList` lets you add, remove, and toggle CSS classes without touching the full `className` string. `dataset` exposes `data-*` attributes as a plain object.

</ExampleProse>
<ExampleCode>

```js
const card = document.querySelector(".card");

// Read and write text
console.log(card.textContent); // "Original text"
card.textContent = "Updated text";

// Toggle a CSS class
card.classList.add("is-active");
card.classList.remove("is-hidden");
card.classList.toggle("is-highlighted"); // adds if absent, removes if present
console.log(card.classList.contains("is-active")); // true

// Access data attributes (data-user-id="42" in HTML)
console.log(card.dataset.userId); // "42"
card.dataset.userId = "99"; // sets data-user-id="99"
```

</ExampleCode>
</ExamplePair>

<ExamplePair>
<ExampleProse>

`document.createElement` creates a new element in memory. `.append` inserts it into the DOM. `.remove` takes an element out. This is the safe way to add dynamic content - unlike `innerHTML`, it never interprets the content as markup.

</ExampleProse>
<ExampleCode>

```js
const list = document.querySelector("ul");

// Create a new list item and insert it
const newItem = document.createElement("li");
newItem.textContent = "New item";  // safe: treated as text, not HTML
list.append(newItem);

// Insert before an existing element
const firstItem = list.querySelector("li");
list.insertBefore(newItem, firstItem);

// Remove an element
firstItem.remove();

// DANGER: innerHTML with user data is XSS
// list.innerHTML = userInput; // never do this
// SAFE alternative:
const safe = document.createElement("li");
safe.textContent = userInput; // treated as plain text
list.append(safe);
```

</ExampleCode>
</ExamplePair>

<InProduction>
`innerHTML` with any user-supplied data is XSS (cross-site scripting) by default. A string like `<img src=x onerror="stealCookies()">` becomes a live script the moment it hits `innerHTML`. Prefer `textContent` for plain text and `createElement` + `append` for structure. In hot loops (like rendering a long list on scroll), cache the node reference outside the loop. `querySelector` runs a full CSS-selector match every call and is not free.
</InProduction>


How JavaScript reads and mutates the live HTML tree - selecting nodes, changing content and classes, and creating elements safely without opening an XSS hole.