Unveiling the Mystery: Tracking Focus Destination on Blur Event in JavaScript

The focus event bubbles up the DOM tree, meaning it triggers on the element that gained focus and then on its parent elements all the way to the document object. We can leverage this behavior by attaching an event listener to the document object using the capture phase. This allows us to intercept the focus event before it reaches the specific element.

Here's an example:

document.addEventListener('focus', (event) => {
  // This will fire before the focus event on the specific element
  console.log("Focus went to:", event.target);
}, true); // Use capture phase

const input1 = document.getElementById("input1");
const input2 = document.getElementById("input2");

input1.addEventListener('blur', () => {
  console.log("Input 1 lost focus");
});

input2.addEventListener('blur', () => {
  console.log("Input 2 lost focus");
});

Explanation:

1. We add an event listener to the document object for the focus event with the capture phase set to true.
2. Inside the focus event handler, we can access the target property of the event object, which points to the element that gained focus.

Tracking previously focused element:

Another approach is to keep track of the element that was previously focused using a variable. When a blur event occurs, we can compare the blurred element with the previously focused one to determine where the focus shifted.

let previouslyFocusedElement;

document.addEventListener('focus', (event) => {
  previouslyFocusedElement = event.target;
});

const input1 = document.getElementById("input1");
const input2 = document.getElementById("input2");

input1.addEventListener('blur', () => {
  console.log("Input 1 lost focus, focus went to:", previouslyFocusedElement);
});

input2.addEventListener('blur', () => {
  console.log("Input 2 lost focus, focus went to:", previouslyFocusedElement);
});

1. We declare a variable previouslyFocusedElement to store the last focused element.
2. In the focus event handler, we update the previouslyFocusedElement with the target of the event.
3. Inside the blur event handlers, we compare the blurred element with the previouslyFocusedElement to identify the new focused element.

Related issues and solutions:

• Conflicting focus events: If multiple elements gain or lose focus simultaneously, the order of events might be unpredictable. Consider using timeouts or more complex logic to handle such scenarios.
• Focus within iframes: The above methods work within the current document. To track focus across iframes, additional considerations like the postMessage API are needed.