What is event-driven programming in web development?

Event-driven programming runs code in response to events (clicks, input, timers, network) via registered callbacks, instead of top-to-bottom sequentially.

How it works:

1. Register an event listener on an element
2. Wait for the event to occur
3. Execute the callback function when triggered

Common event sources:

• User actions: clicks, key presses, mouse movements, form input
• Browser events: page load, resize, scroll
• Network events: fetch complete, WebSocket message
• Timers: setTimeout, setInterval

Example flow:

button.addEventListener("click", handleClick);
// Program continues... doesn't wait
// handleClick runs ONLY when button is clicked

Key concept: The browser's event loop continuously checks for events and dispatches them to registered handlers.

Go deeper:

• Introduction to events (MDN) — registering handlers, the event object, and responding to user actions.
• DOM event (Wikipedia) — the standardised event model and the capture → target → bubble flow.
• Bubbling and capturing (javascript.info) — how an event travels through ancestors, and event delegation.