Event Object: preventDefault(), stopPropagation(), and target vs. currentTarget

When an event occurs in the browser (e.g., a click, a keypress, a form submission), JavaScript's event listener callback function automatically receives an Event object as its first argument. This Event object is a powerful tool, carrying all the necessary information about the event that just happened.

Beyond just information, the Event object also provides methods that allow you to control the event's default browser behavior and its propagation through the DOM.

1. The Event Object: Your Event's Blueprint

The Event object contains various properties that describe the event:

• type: The name of the event (e.g., 'click', 'input', 'submit').
• target: The actual DOM element that originally triggered the event (where the event originated). This is the deepest element in the DOM tree that the event occurred on.
• currentTarget: The DOM element to which the event listener was attached. This is the element that the event is currently bubbling through.
• timeStamp: The time the event occurred (in milliseconds since page load).
• isTrusted: A boolean indicating if the event was generated by a user action (true) or by a script (false).
• Properties specific to event type (e.g., clientX, clientY for mouse events; key, code for keyboard events).

Understanding target vs. currentTarget is particularly important for techniques like event delegation (covered in the next lesson), but it's vital to grasp their difference here.

2. event.preventDefault(): Stopping Default Browser Actions

Many HTML elements have default behaviors associated with certain events:

• Clicking an <a> tag: Navigates to the href URL.
• Submitting a <form>: Reloads the page (or navigates to the action URL).
• Clicking a checkbox: Toggles its checked state.
• Pressing a spacebar while focused on a button: Clicks the button.

The event.preventDefault() method stops these default browser actions from occurring.

• Purpose: To prevent the browser's default behavior for a specific event, allowing you to implement your own custom logic instead.
• Syntax: event.preventDefault(); (called inside the event listener function)

3. Event Propagation: Bubbling and Capturing

Before understanding stopPropagation(), it's crucial to know about event propagation:

When an event occurs on an element (e.g., a button inside a div), that event doesn't just happen on the button. It goes through two phases:

1. Capturing Phase: The event starts from the window, travels down the DOM tree through ancestor elements to the target element.
2. Bubbling Phase: The event then "bubbles up" from the target element through its ancestors back to the window.

Most events (like click, input, submit) bubble by default. Event listeners typically listen during the bubbling phase unless the capture: true option is set in addEventListener().

4. event.stopPropagation(): Halting Event Propagation

The event.stopPropagation() method prevents the event from continuing to propagate through the DOM tree. It stops the event from either bubbling up to ancestor elements or capturing down to descendant elements (depending on which phase the listener is in).

• Purpose: To prevent an event from triggering listeners on parent/child elements when it originates from a specific element.
• Syntax: event.stopPropagation(); (called inside the event listener function)

5. event.stopImmediatePropagation() (Advanced)

While stopPropagation() stops bubbling/capturing, stopImmediatePropagation() does that AND prevents any other listeners on the same element from being called. This is rarely needed but can be useful in specific complex scenarios where multiple listeners are attached to one element and you want only the first one to run under certain conditions.

Exercise: Controlled Event Behavior

Instructions: Implement the following event behaviors to practice preventDefault() and stopPropagation().

<style>
  #outerBox {
    border: 2px solid blue;
    padding: 30px;
    margin: 20px;
    background-color: lightblue;
  }
  #innerBox {
    border: 2px solid green;
    padding: 20px;
    background-color: lightgreen;
  }
  #linkToPrevent {
    display: block;
    margin-top: 15px;
    font-weight: bold;
    color: darkblue;
  }
  form {
    margin-top: 20px;
    border: 1px solid #ccc;
    padding: 10px;
  }
</style>

<div id="outerBox">
  Outer Box
  <div id="innerBox">
    Inner Box
    <button id="stopButton">Click & Stop Propagation</button>
  </div>
</div>

<a id="linkToPrevent" href="[https://developer.mozilla.org/en-US/](https://developer.mozilla.org/en-US/)">MDN Link (Prevent Default)</a>

<form id="searchForm">
  <input type="text" id="searchInput" placeholder="Search...">
  <button type="submit">Search</button>
</form>

<p id="eventOutput" style="margin-top: 20px; font-weight: bold;"></p>

Your Task:

1. Prevent Link Navigation:
   • Select linkToPrevent.
   • Add a click event listener to it.
   • Inside the listener, use event.preventDefault() to stop the link from navigating.
   • Log a message to eventOutput confirming the navigation was prevented.
2. Stop Propagation:
   • Select outerBox, innerBox, and stopButton.
   • Add click listeners to all three elements.
   • Each listener should log its own element's ID (e.g., "Outer box clicked!").
   • Inside the stopButton's click listener, use event.stopPropagation().
   • Test by clicking stopButton, then innerBox, then outerBox and observe the console/output.
3. Prevent Form Submission:
   • Select searchForm.
   • Add a submit event listener to it.
   • Inside the listener, use event.preventDefault() to stop the form from reloading the page.
   • Log a message to eventOutput indicating the form was "submitted" (without reload) and show the input value.