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

by

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).

More Related Contents:

  1. Catch browser’s “zoom” event in JavaScript
  2. What exactly is the parameter e (event) and why pass it to JavaScript functions?
  3. Javascript – How to detect if document has loaded (IE 7/Firefox 3)
  4. How to stop event bubbling on checkbox click
  5. Difference between “change” and “input” event for an `input` element
  6. ‘this’ does not work properly in another event. I’m clueless as to why [duplicate]
  7. Pass mouse events through absolutely-positioned element
  8. How to pass event as argument to an inline event handler in JavaScript?
  9. jQuery equivalent of JavaScript’s addEventListener method
  10. Attach a body onload event with JS
  11. Detecting when Iframe content has loaded (Cross browser)
  12. Changing the keypress
  13. jQuery live scroll event on mobile (work around)
  14. Socket.io Client: respond to all events with one handler?
  15. how to move a div with arrow keys
  16. Detect if button click real user or triggered by a script
  17. jQuery Change event on an element – any way to retain previous value?
  18. blur event.relatedTarget returns null
  19. jQuery Mobile : What is the order of page events triggering?
  20. Handling “onclick” event with pure JavaScript
  21. Create JavaScript custom event
  22. Event fired when clearing text input on IE10 with clear icon
  23. How to unbind a specific event handler
  24. Event propagation in Javascript
  25. SVG trigger animation with event
  26. How to disable mouseout events triggered by child elements?
  27. Prototype equivalent for jQuery live function
  28. addEventListener to iFrame
  29. Add multiple window.onload events
  30. Replacement for deprecated `keypress` DOM event

Leave a Comment