Focus events include a relatedTarget property

Today I discovered an MDN page that describes relatedTarget property of focus events ( blur, focus, focusin, and focusout). What's a relatedTarget?

If you attach a focus event listener the fired events will include the target element, but also element that stand in relation to the event.

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 target and relatedTarget relations are:

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

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

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