10

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?

Rubens Mariuzzo
  • 28,358
  • 27
  • 121
  • 148

3 Answers3

26

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

gdoron
  • 147,333
  • 58
  • 291
  • 367
  • 3
    To reduce confusion: "in that **it** supports detecting the focus event on parent elements" refers to the **focusin** event. – Timo Aug 26 '15 at 10:59
3

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 (in other words, it supports event bubbling).

And yes, you can find the same answer also here: Difference between the javascript/jQuery events "focus" and "focusin"?

Community
  • 1
  • 1
VisioN
  • 143,310
  • 32
  • 282
  • 281
2

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

Source

Sjoerd
  • 74,049
  • 16
  • 131
  • 175