How to Add an Event Listener in JavaScript

Use addEventListener() when JavaScript should react to clicks, typing, form submissions, scrolling, or any browser event. This is the cleanest way to connect user actions with dynamic behavior.

What you’ll build or solve

You’ll learn how to add an event listener in JavaScript using the standard DOM method. You’ll also know how to pass callback functions and target different event types.

When this approach works best

This approach is the right choice when UI behavior depends on user interaction or browser state.

Common real-world scenarios include:

• Button clicks
• Form submission
• Input typing
• Keyboard shortcuts
• Scroll reactions

This is a bad idea when the same behavior is hardcoded directly in HTML attributes like onclick. Event listeners keep logic cleaner and easier to scale.

Prerequisites

You only need:

• A basic HTML page
• A JavaScript file or <script> tag
• Basic DOM selection knowledge

Step-by-step instructions

Step 1: Select the element and attach the listener

Start by selecting the target element.

<button class="cta">Start</button>

<script>
  const button = document.querySelector(".cta");

  button.addEventListener("click", () => {
    console.log("Button clicked");
  });
</script>

The first argument is the event type, and the second is the callback function.

You can listen for many event types, not just clicks.

const input = document.querySelector(".email");

input.addEventListener("input", () => {
  console.log("Typing...");
});

What to look for:

• Select the element first
• The first argument is the event name
• The second argument is the callback
• Great for reusable interaction logic
• Cleaner than inline HTML event attributes

Examples you can copy

Button click

button.addEventListener("click", () => {
  alert("Started");
});

Form submit

form.addEventListener("submit", (event) => {
  event.preventDefault();
});

Input typing

search.addEventListener("input", () => {
  console.log("Searching...");
});

Common mistakes and how to fix them

Mistake 1: Calling the callback immediately

What the reader might do:

button.addEventListener("click", handleClick());

Why it breaks: the function runs immediately instead of waiting for the event.

Corrected approach:

button.addEventListener("click", handleClick);

Mistake 2: Forgetting to select the element

What the reader might do:

button.addEventListener("click", () => {});

Why it breaks: button is undefined if it was never selected.

Corrected approach:

const button = document.querySelector(".cta");

Mistake 3: Using the wrong event type

What the reader might do:

input.addEventListener("click", () => {});

Why it breaks: text fields usually need input or change.

Corrected approach:

input.addEventListener("input", () => {});

Troubleshooting

If the event never fires, confirm the selector matches the HTML.

If the callback runs immediately, remove the parentheses.

If typing events do not work, switch from click to input.

If the script throws null, move it below the HTML or wait for DOM load.

Quick recap

• Use addEventListener() for interactions
• Select the element first
• Pass the event name and callback
• Do not call the callback immediately
• Great for scalable UI behavior