Binding jQuery handlers during the event capture phase (not event bubbling)

Question

I'm looking to implement event delegation on blur/focus events, in a similar way to that suggested on quirksmode. As explained in TFA, blur and focus events don't bubble, so you can't use event delegation with them in the bubbling phase, but you can grab them in the capture phase (man, javascript events are weird).

Anyhow, as far as I can see, jQuery events all apply to the bubbling phase, or at least that's where I've always used them. I can't see any information on this one way or the other in the jQuery docs, and by default using something like $('#foo').blur(blurHandler) doesn't seem to capture it.

I would prefer to stick to using jQuery for consistency; is there any way to do this?

Answer 1

If you're saying that you want a container to trigger a handler when a descendant <input> gets focus or blur, try using .focusin() and .focusout().

• http://api.jquery.com/focusin/
• http://api.jquery.com/focusout/

From the docs:

The focusin event is sent to an element when it, or any element inside of it, gains focus. This is distinct from the focus event in that it supports detecting the focus event on parent elements.

The focusout event is sent to an element when it, or any element inside of it, loses focus. This is distinct from the blur event in that it supports detecting the loss of focus from parent elements (in other words, it supports event bubbling).