Browser Default Actions

What it IS:

• Browsers have built-in responses to events (click link = navigate, submit button = send form, right-click = context menu)
• event.preventDefault() tells browser “don’t do your usual thing”
• return false (only for onclick="" handlers) does the same thing

The Mechanics:

javascript

// Browser wants to navigate when you click a link
<a href="/page" onclick="return false">Won't navigate</a>
<a href="/page" onclick="event.preventDefault()">Also won't navigate</a>
 
// Browser wants to submit form, but you stop it
form.onsubmit = function(e) {
  e.preventDefault(); // Form doesn't submit
  // Your custom validation here
}

Real Behavior:

• Event happens → Your handler runs → Browser checks “did they prevent default?” → If yes, browser does nothing → If no, browser does its thing
• Prevention only works if you call it BEFORE your handler finishes
• Some events trigger other events (mousedown → focus), preventing first prevents the chain

Interview Gotchas:

1. return false only works with on:

   javascript

   elem.onclick = () => false; // Works
   elem.addEventListener('click', () => false); // Doesn't work - use preventDefault()

2. event.defaultPrevented checks if someone else already prevented:

   javascript

   button.onclick = (e) => e.preventDefault(); // Button prevents
   document.onclick = (e) => {
     if (e.defaultPrevented) return; // "Someone else handled this, skip"
     // Do document-level handling
   }

3. passive: true = “I promise not to prevent”:

   javascript

   elem.addEventListener('touchmove', handler, {passive: true}); 
   // Browser can scroll immediately, won't wait for handler

Bottom Line: preventDefault() = “browser, don’t do your default thing, I’m handling this myself”. Check defaultPrevented to see if someone else already handled it.