When a ‘blur’ event occurs, how can I find out which element focus went to?

Question

2015 answer: according to UI Events, you can use the relatedTarget property of the event:

Used to identify a secondary EventTarget related to a Focus
event, depending on the type of event.

For blur events,

relatedTarget: event target receiving focus.

Example:

function blurListener(event) {
  event.target.className="blurred";
  if(event.relatedTarget)
    event.relatedTarget.className="focused";
}
[].forEach.call(document.querySelectorAll('input'), function(el) {
  el.addEventListener('blur', blurListener, false);
});

.blurred { background: orange }
.focused { background: lime }

<p>Blurred elements will become orange.</p>
<p>Focused elements should become lime.</p>
<input /><input /><input />

Note Firefox won’t support relatedTarget until version 48 (bug 962251, MDN).

Leave a Comment Cancel reply