Working with DOM Events

The DOM dispatches events when users click, type, submit, or interact with the page. addEventListener attaches a callback; a typed listener receives an event object. The event target can be less specific than the element you attached the listener to, so prefer a known listener reference or a runtime check before reading element-specific properties.

The pure state update makes the click counter testable. In the browser, the click handler calls this function and writes the new count into a status element.

An event handler's existence does not prevent default browser behavior; use event.preventDefault() for form submissions when necessary.

Save as working-dom-events.ts. The following program passed strict TypeScript compilation, and the displayed output was captured by executing its emitted JavaScript with Node.js 22.16.0.

TypeScript source

function nextCount(current: number): number { return current + 1; }
let clicks = 0;
clicks = nextCount(clicks);
clicks = nextCount(clicks);
console.log(`Clicks: ${clicks}`);

Verified output

Clicks: 2

Compile: npx tsc --strict --target es2022 --module commonjs working-dom-events.ts; run: node working-dom-events.js. For Node.js API examples, install @types/node first. For browser projects, use the browser-specific instructions below.

The example runs in Node.js 22.16.0; if it reads runtime environment details, your displayed values may differ.

The pure state update makes the click counter testable. In the browser, the click handler calls this function and writes the new count into a status element.

Predict what changes if you alter one input. Then run the code to compare your reasoning with the real output.

Real browser lab: This TypeScript targets actual DOM APIs and was successfully type-checked against the DOM library. It requires a browser; its runtime interaction was not simulated in Node.js. Save the two files together, compile the TypeScript, and serve this folder through a local HTTP server such as python3 -m http.server 8000 (especially important for modules and workers).

index.html

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><title>TypeScript browser lab</title></head><body>
<h1 id="title">TypeScript lesson</h1><button id="action">Run</button><p id="output"></p>
<script type="module" src="./app.js"></script>
</body></html>

app.ts

const button = document.querySelector<HTMLButtonElement>("#action");
const output = document.querySelector<HTMLElement>("#output");
let count = 0;
button?.addEventListener("click", (_event: MouseEvent) => {
  count++;
  if (output) output.textContent = `Clicked ${count} times`;
});

Compile: npx tsc --strict --target es2022 --module es2022 --lib es2022,dom app.ts. For the worker example also compile worker.ts with --lib es2022,webworker. Then open the served HTML page in a browser to interact with it.

An event handler's existence does not prevent default browser behavior; use event.preventDefault() for form submissions when necessary.

Identify whether the failure is a type-checking issue, a configuration issue, or a runtime behavior issue before choosing a fix.

Attach one click listener to a button and show the count in an output element. Add a second event listener for keyboard input.

Write down your expected result first. For configuration examples, compare compiler output and diagnostics; for test examples, make the assertion fail deliberately to verify that the tool reports it.

The DOM dispatches events when users click, type, submit, or interact with the page.

Run the primary example, then complete the practice task or environment-specific lab.