Lesson 3: The Event Object and preventDefault()

Learning Objectives

By the end of this lesson, learners will be able to:

• Understand what the event object is in JavaScript
• Use the event object to access important information (like the key pressed or the element clicked)
• Use preventDefault() to stop default browser behavior
• Apply this knowledge in forms, links, and other interactive elements

What Is the Event Object?

Every time an event happens—like a click or a key press—JavaScript automatically passes an event object to your event handler.

This object contains information about the event:

• What type of event it was
• Which element triggered it
• What key was pressed (if it was a keyboard event)
• And more

It’s like a detailed report of what just happened.

Syntax: Receiving the Event Object

You can give the parameter any name (though event or e is most common):

element.addEventListener("click", function(event) {
  console.log(event); // full event object
});

Useful Properties of the Event Object

What Is preventDefault()?

Many HTML elements have built-in behavior:

• Clicking a <button type="submit"> submits the form and refreshes the page
• Clicking a <a href="#"> jumps to the top of the page
• Pressing Enter in a form submits it

Sometimes, we want to stop this behavior so we can control it with JavaScript.

That’s what event.preventDefault() does.

Example 1: Prevent Form Submission

HTML:

<form id="my-form">
  <input type="text" placeholder="Your name" />
  <button type="submit">Send</button>
</form>
<p id="feedback"></p>

JavaScript:

let form = document.getElementById("my-form");
let feedback = document.getElementById("feedback");

form.addEventListener("submit", function(event) {
  event.preventDefault(); // stops the form from reloading the page
  feedback.textContent = "Form submitted (but no reload)!";
});

Without preventDefault(), the page would reload and the message wouldn’t appear.

Example 2: Prevent Link Navigation

HTML:

<a href="https://example.com" id="my-link">Go to Example</a>

JavaScript:

let link = document.getElementById("my-link");

link.addEventListener("click", function(event) {
  event.preventDefault();
  alert("Link clicked, but not navigating!");
});

event.target vs event.currentTarget

• event.target → the exact element that was clicked
• event.currentTarget → the element where the listener is attached

Useful for event delegation, when many elements share one listener.

Example: Using .key in Keyboard Events

HTML:

<input id="keyboard-input" placeholder="Type something" />
<p id="key-output"></p>

JavaScript:

let input = document.getElementById("keyboard-input");
let output = document.getElementById("key-output");

input.addEventListener("keydown", function(event) {
  output.textContent = "You pressed: " + event.key;
});

Summary