What Is a JavaScript Event?

Imagine a webpage with a button labeled “Show Message.” The page looks perfectly normal until someone clicks that button. At that moment, JavaScript can respond by displaying a message, changing a color, or performing another action.

An event is a notification that something has happened. It might be a mouse click, a key being pressed, text being entered, or a form being submitted.

JavaScript can listen for these events and execute a function when they occur.

const button = document.getElementById("helloButton");

button.addEventListener("click", function() {
  console.log("Hello! You clicked the button.");
});

The browser waits for a click on the selected button. When the click happens, JavaScript runs the function provided to addEventListener().

Meet addEventListener()

The most common way to respond to browser events is addEventListener(). It accepts an event type and a function that should run when that event occurs.

element.addEventListener("eventName", function() {
  // Code that runs when the event happens
});

You can use a named function instead of writing it directly inside the listener.

const button = document.getElementById("saveButton");

function showConfirmation() {
  console.log("Your changes were saved!");
}

button.addEventListener("click", showConfirmation);

Notice that showConfirmation is passed without parentheses. Writing showConfirmation() would call the function immediately instead of registering it as the event handler.

You can attach more than one event listener to an element. This makes it possible to keep different behaviors organized.

Respond to Clicks and Pointer Movement

Mouse and pointer interactions help make interfaces feel responsive. Buttons, cards, menus, and other interactive elements often respond to clicks or pointer movement.

const card = document.getElementById("demoCard");

card.addEventListener("click", function() {
  console.log("Card clicked!");
});

card.addEventListener("mouseenter", function() {
  console.log("Pointer entered the card.");
});

card.addEventListener("mouseleave", function() {
  console.log("Pointer left the card.");
});

click fires when an element is activated with a pointer and can also fire from keyboard activation on native buttons. mouseenter occurs when the pointer enters an element, and mouseleave occurs when it leaves.

Listen for Keys Being Pressed

Keyboard events allow websites to respond when visitors press keys. This is useful for shortcuts, games, and input-related features.

const input = document.getElementById("nameInput");

input.addEventListener("keydown", function(event) {
  if (event.key === "Enter") {
    console.log("Enter was pressed!");
  }
});

The keydown event fires when a key is pressed. The event.key property identifies the key, such as "Enter", "Escape", or "a".

For text fields, the input event is generally a better choice when your goal is to detect changes in the field’s value—including pasted text.

input.addEventListener("input", function() {
  console.log("Current value:", input.value);
});

Learn What Happened

When an event occurs, the browser passes an event object to your listener. This object contains information about the interaction.

const button = document.getElementById("myButton");

button.addEventListener("click", function(event) {
  console.log(event.type);
  console.log(event.target);
  console.log(event.currentTarget);
});

event.type tells you which event occurred. event.target identifies the element where the event originated, while event.currentTarget identifies the element whose listener is currently running.

These can be different when events bubble from a child element to an ancestor.

Control Form Submission

HTML forms have a default behavior: when submitted, the browser usually navigates or reloads to process the submission. Sometimes you want JavaScript to handle the form instead.

const form = document.getElementById("contactForm");

form.addEventListener("submit", function(event) {
  event.preventDefault();

  const name = document.getElementById("name").value;

  console.log("Hello, " + name + "!");
});

preventDefault() prevents the browser’s default submission behavior when the event is cancelable. This allows you to display a confirmation or validate the input without immediately navigating away.

For example, you could update a message on the page using textContent.

Explore Different User Interactions

Let’s see several event types working together. The explorer below records clicks, text changes, keyboard actions, and pointer activity.

Notice how the same page can respond differently depending on which event occurs. That’s the foundation of interactive interfaces.