Understanding Events: How JavaScript Responds to You

How does a webpage know when you click, scroll, or press a key?

When you begin learning web development, you’ll use languages like HTML and CSS to build the webpage and shape its layout and style. But creating a webpage that responds to its users requires another tool: JavaScript.

In the “Practical JavaScript: From Scratch to React” course series on Michigan Online, you’ll learn how JavaScript transforms static webpages into interactive applications. One of the fundamental concepts behind that function is the event.

What is an Event?

An event is a signal that tells the browser something has happened.

• User actions: Events can come from user actions, such as clicking a button, pressing a keyboard key, scrolling, or hovering over an element.
• Browser activity: Events can also come from the browser or another process, such as a page finishing its load, the browser window being resized, or a brief passage of time.

When developers build an interactive page, they write code that listens for these signals and then determines how the page should respond. The first is a callback function. Functions take in inputs, process the information, and react appropriately. Developers define these callback functions to identify what to do when the event happens.

The event and the callback function are then passed to an event listener, which ties the type of event, like a click or a key press, with that callback. The event listener tells the browser that a user action has happened, and it needs to react.

How Event Listeners Work

You can think of an event listener as a virtual ear that waits in the background for a particular signal. When you set up an event listener in JavaScript, you provide two essential pieces of information: what to listen for (i.e. what event type to react to) and what to do in response. The event description identifies the signal, such as a user pressing a key. The callback function contains the instructions the browser should run when that event occurs.

In code, setting up a listener looks like this:

button.addEventListener("click", handleClick);

Here, "click" is the event type and handleClick is the callback — the two pieces of information the listener needs to do its job.

Building Blocks of Webpages

A professional web application may use many event listeners, each responding to a different action. One might handle a button click, another a key press, and another scrolling. When developers build a webpage, they create event listeners to respond to every potential event that the user might perform.

Understanding how events, listeners, and callbacks work together is crucial to understanding how to build responsive applications. Interactive systems work together to create a smooth, interactive, and accessible web design. Events, listeners, and callbacks are front-end tools that run in the user's browser, and building a complete web application often draws on both front-end and back-end skills — both of which you'll develop as you move through the series.

Why it Matters

In “Practical JavaScript,” you’ll learn about events, listeners, and callback functions in the “Building Interactive Web Applications with JavaScript” course, the second of the four courses in the series.

In this self-paced course series, you’ll build on these skills and explore a variety of foundational elements, starting with HTML and CSS, then moving into JavaScript, real-time multi-user applications, accessibility, and front-end development with React. The “Practical JavaScript” series guides learners through these building blocks, featuring hands-on “Let’s Build” sessions that develop the proficiency and confidence needed to prepare you to create quality web applications.