Focus events include a relatedTarget property (#tilPost)

Today I came across an MDN page describing the relatedTarget property of focus events. blur, focus, focusin, and focusout count as focus events.

It turns out that if you attach a focus event listener the fired event will include not only a target element but also a relatedTarget element.

document.querySelector('button')
  .addEventlistener('focus', (event) => {
    console.log(event.target);        
    // ? the element that received focus
    console.log(event.relatedTarget); 
    // ? the element that lost focus (if any)
  });

The rules for target and relatedTarget in focus events are as follows:

Using relatedTarget, you can figure out what the previously focused element was when a user is "tabbing" around in your interface.

relatedTarget can also be null when there was no previous/next target. This happens, for example, when a button had focus, and the user clicks something that is not focusable.

That's complete news to me! ?

If you want to play around and see the property in action, I built a quick prototype on CodePen.