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…


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis

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:

Event name target relatedTarget
focus element receiving focus element loosing focus
blur element loosing focus element receiving focus
focusin element receiving focus element loosing focus
focusout element losing focus element receiving focus

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.


Reply to Stefan


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis


Print Share Comment Cite Upload Translate
APA
Stefan Judis | Sciencx (2023-02-04T22:58:17+00:00) » Focus events include a relatedTarget property (#tilPost). Retrieved from https://www.scien.cx/2019/09/07/focus-events-include-a-relatedtarget-property-tilpost/.
MLA
" » Focus events include a relatedTarget property (#tilPost)." Stefan Judis | Sciencx - Saturday September 7, 2019, https://www.scien.cx/2019/09/07/focus-events-include-a-relatedtarget-property-tilpost/
HARVARD
Stefan Judis | Sciencx Saturday September 7, 2019 » Focus events include a relatedTarget property (#tilPost)., viewed 2023-02-04T22:58:17+00:00,<https://www.scien.cx/2019/09/07/focus-events-include-a-relatedtarget-property-tilpost/>
VANCOUVER
Stefan Judis | Sciencx - » Focus events include a relatedTarget property (#tilPost). [Internet]. [Accessed 2023-02-04T22:58:17+00:00]. Available from: https://www.scien.cx/2019/09/07/focus-events-include-a-relatedtarget-property-tilpost/
CHICAGO
" » Focus events include a relatedTarget property (#tilPost)." Stefan Judis | Sciencx - Accessed 2023-02-04T22:58:17+00:00. https://www.scien.cx/2019/09/07/focus-events-include-a-relatedtarget-property-tilpost/
IEEE
" » Focus events include a relatedTarget property (#tilPost)." Stefan Judis | Sciencx [Online]. Available: https://www.scien.cx/2019/09/07/focus-events-include-a-relatedtarget-property-tilpost/. [Accessed: 2023-02-04T22:58:17+00:00]
rf:citation
» Focus events include a relatedTarget property (#tilPost) | Stefan Judis | Sciencx | https://www.scien.cx/2019/09/07/focus-events-include-a-relatedtarget-property-tilpost/ | 2023-02-04T22:58:17+00:00
https://github.com/addpipe/simple-recorderjs-demo