Focus and Blur Events

What it IS:

• focus = element becomes active/selected (ready to receive input)
• blur = element loses focus (user moved away)
• Browser decides which elements can be focused (inputs, buttons, links by default)

The Mechanics:

// User clicks input or tabs to it
input.onfocus = function() {
  console.log("Ready for input!");
};
 
// User clicks elsewhere or tabs away
input.onblur = function() {
  console.log("Done with this field");
  // Validate, save, etc.
};

Real Behavior:

• Focus happens: click element, Tab key, elem.focus() method
• Blur happens: click elsewhere, Tab away, elem.blur() method, alert() popup
• Only ONE element can be focused at a time (document.activeElement shows which)

Tricky Parts:

1. Focus/Blur DON’T bubble:

   // This WON'T work:
   form.onfocus = () => highlight(); // Form never gets focus event
    
   // These WILL work:
   form.addEventListener('focus', highlight, true); // Capturing phase
   form.addEventListener('focusin', highlight); // Special bubbling version

2. Can’t prevent blur:

   input.onblur = function(e) {
     e.preventDefault(); // DOESN'T WORK - blur already happened
     this.focus(); // But you CAN force focus back (annoying!)
   };

Interview Gotchas:

• alert() steals focus, triggers blur on current element
• Removing element from DOM triggers blur
• focusin/focusout bubble, focus/blur don’t
• Use capturing phase for focus delegation: addEventListener('focus', handler, true)

Bottom Line: Focus = “active element ready for input”, blur = “moving away”. They don’t bubble (use focusin/focusout or capturing). Use tabindex to make anything focusable.

---

Manual Focus in JavaScript:

The Methods:

// Make element active/focused
element.focus();
 
// Remove focus from element
element.blur();
 
// Check what's currently focused
console.log(document.activeElement); // Returns the focused element

Real Examples:

javascript

// Focus on input when page loads
window.onload = () => {
  document.getElementById('username').focus();
};
 
// Focus back if validation fails
input.onblur = function() {
  if (!this.value.includes('@')) {
    this.focus(); // Force them back to fix email
  }
};
 
// Focus next field after entering data
input.addEventListener('input', function() {
  if (this.value.length === 10) { // Phone number complete
    document.getElementById('next-field').focus();
  }
});

Common Patterns:

1. Focus first invalid field:

   function validateForm() {
     let firstError = document.querySelector('.error');
     if (firstError) {
       firstError.focus(); // Jump to problem
     }
   }

2. Focus when element becomes visible:

   javascript

   modal.style.display = 'block';
   modal.querySelector('input').focus(); // Focus first input in modal

3. Remove focus entirely:

   javascript

   document.activeElement.blur(); // Unfocus whatever is focused

Interview Gotcha:

• Can only focus “focusable” elements (inputs, buttons, links, or elements with tabindex)
• element.focus() might not work on hidden elements
• Some browsers prevent programmatic focus in certain contexts (security)

Bottom Line: element.focus() = make it active, element.blur() = remove focus, document.activeElement = see what’s focused now.