Javascript “focus” and “blur” events don’t bubble.  I don’t often need them to, but I run into the same problem every few years and have to re-learn about “focusin” & “focusout”.  They fire at the same time as “focus” and “blur” but do bubble.

I created an example HTML page.  Where you listen to “focus” and “blur” on an <input> element

input1_1.addEventListener(“focus”, () => { input1_1FocusStatus.innerHTML = “focus”; });
input1_1.addEventListener(“blur”, () => { input1_1FocusStatus.innerHTML = “blur”; });

You can listen to “focusin” and “focusout” on parent elements

form.addEventListener(“focusin”, () => { formFocusinStatus.innerHTML = “focusin”; });
form.addEventListener(“focusout”, () => { formFocusinStatus.innerHTML = “focusout”; });

Parent elements receive “focusin” and “focusout” every time a child element receives and loses focus.  As the user tabs between inputs on a form, the form will receive multiple “focusout” & “focusin” events.  

I have a javascript library I’ve been using and changing for 15 years (drjs).  I recently updated the event handling and the InputHandler uses “focusin” and “focusout” so it’s easy to add a listen handler to a parent and receive focus events for dynamically added children – a problem I ran into again writing a photo tagging app