What is the difference between focusin/focusout vs focus/blur in jQuery? [duplicate]

Question

I was handling some events using the following code with jQuery 1.7.2:

$().on('focus blur', function(event) {
  console.log(event.type);
});

And I have noticed that event.type for both events, prints out: focusin and focusout.

What is difference between focusin/focusout vs focus/blur?

Answer 1

Short answer: focusin    bubbles, focus does not.
        focusout bubbles, blur   does not.
Read 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 (in other words, it supports event bubbling).