Search code examples
javascriptfocusdom-events

Focus event doesn't fire on input fields (no jQuery)

For some reason the following code only fires when the window gets focus, but not when input fields get focus, or any other element (regardless of whether they have a tabindex or not).

I don't want to use someElement.addEventListener method, because the element isn't attached to the view at the time the event listener is added.

var handleFocus = function(event) {
   var el = event.target;
   console.log(el);
}

addEventListener('focus', handleFocus, false);

I basically need to listen for when any input fields are focused on. My reason for wanting to apply it to the parent window, is that the form fields are added and removed from the view at different times (Aurelia).

When the event fires, I want to be able to read properties of the target, to see what actions I need to take.

Any help on this would be super...

Solution

  • Turns out you need to set the 'useCapture' option to true. If you want to know more about 'useCapture' option, this StackOverflow question does a better job than MDN.

    Just means I had to change from this:

    addEventListener('focus', handleFocus, false);

    ...to this:

    addEventListener('focus', handleFocus, true);