JavaScript Events Explained

A JavaScript event is a signal that something happened on the page — a user clicked a button, typed in a field, submitted a form, or moved the mouse. Your code listens for these events and runs a function in response. This is what turns a static page into an interactive one: events are the moment your JavaScript gets to act.

Listening with addEventListener

The standard way to respond to an event is addEventListener. You give it the event name and a function to run:

// Find the button, then listen for clicks on it
const button = document.querySelector("#subscribe");

button.addEventListener("click", () => {
  console.log("Button was clicked!");
});

The function you pass is called a handler (or callback). It runs every time the event fires. You can attach many listeners to the same element, which is why addEventListener is preferred over older approaches like setting onclick directly.

Common events

const input = document.querySelector("#search");

// Fires on every keystroke in the field
input.addEventListener("input", () => {
  console.log("User is typing...");
});

const form = document.querySelector("#contact-form");

// Fires when the form is submitted
form.addEventListener("submit", (event) => {
  event.preventDefault(); // stop the page from reloading
  console.log("Form submitted — handle it in JavaScript");
});

That event.preventDefault() is important: by default a form submission reloads the page. Calling it lets you handle the data yourself instead.

The event object

Notice the handler can receive an event object (event above). It carries useful details about what happened — which element triggered it, what key was pressed, the mouse position, and more:

document.querySelector("#name").addEventListener("input", (event) => {
  // event.target is the element that fired the event
  console.log("Current value:", event.target.value);
});

event.target is one you'll use constantly — it points to the element the event came from.

Event delegation: one listener for many elements

Imagine a list of twenty buttons. Instead of attaching twenty listeners, you can attach one to the parent and check what was clicked. This is event delegation, and it is both efficient and works for elements added later:

const list = document.querySelector("#course-list");

// One listener on the parent handles clicks on any child button
list.addEventListener("click", (event) => {
  // Only react if a button was the thing clicked
  if (event.target.matches("button")) {
    console.log("Clicked:", event.target.textContent);
  }
});

Events work hand in hand with the DOM: you select an element, listen for an event, then change the page in response. Together they are the foundation of interactivity built on top of JavaScript basics.

Common mistakes

• Forgetting event.preventDefault() on forms. Without it, the page reloads and your JavaScript never gets to handle the data.
• Adding a listener before the element exists. Like with the DOM, run your code after the page has loaded (defer the script or place it at the end of the body).
• Attaching listeners inside a loop when delegation would do. For many similar elements, one listener on the parent is cleaner and handles dynamically added items.
• Confusing the event name. It is click, not onclick, when used with addEventListener. The on prefix belongs to the older attribute style.

FAQ

What's the difference between input and change events? input fires on every keystroke as the user types. change fires once, when the field loses focus after its value changed. Use input for live feedback.

Can I remove a listener later? Yes, with removeEventListener — but you must pass the same named function you added, so save it to a variable rather than using an anonymous one.

Keep learning

• Hub: Web Fundamentals
• Related: The DOM Explained
• Foundation: JavaScript Basics for Beginners
• See also: HTML Forms Explained

Want to build for the web? Explore our courses in Jalgaon.