JavaScript Event Handlers — Why is this bug happening?

Why This Question Matters

If you've spent any time with JavaScript, you've probably written a form handler. It seems straightforward: listen for the submit event, do something with the data, and stop the page from refreshing.

But there is a classic "gotcha" that trips up almost every junior developer. You write the code, you hit the submit button, and the page flickers or refreshes instantly, ignoring your logic entirely. You check your code, see e.preventDefault(), and wonder why the browser is ignoring you.

The issue usually isn't the method itself—it's how you're trying to access the event object. Understanding this is a rite of passage in JS. If you don't get this, you'll spend hours debugging "ghost" bugs where your code simply doesn't execute.

Understanding the Code

Let's look at the snippet provided in the challenge:

document.querySelector("form").addEventListener("submit", function() {
  e.preventDefault()
  processForm()
})

At first glance, it looks fine. We're selecting the form, adding a listener for the submit event, and calling preventDefault() to stop the browser from doing its default behavior (which is sending a GET/POST request and reloading the page).

But here is the problem: Where did e come from?

In JavaScript, when an event is triggered, the browser automatically creates an Event Object. This object contains all the useful metadata about the event—like which button was clicked, the coordinates of the mouse, or in this case, the method to stop the default browser action.

However, the browser doesn't just "broadcast" this object into the global scope. It passes it as an argument to the callback function.

In the snippet above, the function is defined as function() { ... }. It has no parameters. When the code hits e.preventDefault(), the engine looks for a variable named e. Since it isn't defined inside the function or in the global scope, JavaScript throws a ReferenceError: e is not defined.

Because the error happens immediately, the rest of the function stops executing, and the browser proceeds with the default form submission.

Finding the Correct Answer

To fix this, you have to explicitly tell the function to accept the event object. The correct version looks like this:

document.querySelector("form").addEventListener("submit", function(e) {
  e.preventDefault()
  processForm()
})

By adding e (or event, the name doesn't actually matter, but e is the industry shorthand) inside the parentheses, you are capturing the object the browser is handing over. Now, e.preventDefault() has a target to act upon.

Why other options fail:
If you try to call preventDefault() outside of the event handler or try to call it on the document or the form element itself, it won't work. preventDefault is a method of the Event object, not the HTML element.

Common Mistakes Developers Make

Aside from forgetting the parameter, here are a few other traps I see people fall into:

1. Using onclick on the button instead of onsubmit on the form.
If you put a click listener on the submit button, preventDefault() won't always stop the form from submitting if the user hits "Enter" while focused on an input field. Always listen for the submit event on the form itself.

2. Mixing Arrow Functions and this.
If you use an arrow function () => {}, the value of this changes. In a standard function, this refers to the element that triggered the event (the form). In an arrow function, this refers to the surrounding scope (usually the window). If you need to access the form via this, stick to traditional functions.

3. Typos in the method name.
It’s preventDefault(), not preventdefault() or stopDefault(). JavaScript is case-sensitive, and a tiny typo here will crash your script.

Real-World Usage

In a modern production environment, you rarely just "process" a form. You're usually doing one of two things:

First, Client-side Validation. You check if the email is valid or if the password is long enough. If the validation fails, you call e.preventDefault() and show an error message.

Second, AJAX/Fetch requests. In a Single Page Application (SPA) built with React, Vue, or plain JS, you don't want the page to reload because that would wipe out your application state. You prevent the default submission and instead use fetch() to send the data to an API in the background.

Example of a professional implementation:

const contactForm = document.querySelector("#contact-form");
contactForm.addEventListener("submit", async (e) => {

  e.preventDefault();

  

  const formData = new FormData(e.target);

  const data = Object.fromEntries(formData.entries());
try {

    const response = await fetch("/api/contact", {

      method: "POST",

      body: JSON.stringify(data),

    });

    if (response.ok) alert("Message sent!");

  } catch (err) {

    console.error("Submission failed", err);

  }

});

Key Takeaways

- The browser passes an Event object to your listener; you must define a parameter in your function to receive it.
- preventDefault() stops the browser's default action, but it only works when called on that event object.
- Always attach your listener to the submit event of the form, not the click event of the button.
- If your form is refreshing despite your code, check the console for ReferenceError. It's almost always a missing e in your function signature.