213

Is there any difference between JS events blur vs focusout?

I have two textboxes: password and confirm_password.

I want to check password match when user tabs out of the confirm pwd textbox, for example.

In this case which event should I use or does it matter?

Dorian
  • 7,749
  • 4
  • 38
  • 57
Laguna
  • 3,706
  • 5
  • 27
  • 42

2 Answers2

287

The documentation for focusout says (emphasis mine):

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

The same distinction exists between the focusin and focus events.

samjewell
  • 1,068
  • 11
  • 20
Frédéric Hamidi
  • 258,201
  • 41
  • 486
  • 479
  • 2
    It supports detecting the loss of focus from **child** elements, not from parent elements. If the documentation used to say **parent**, it was wrong. Now it says **descendant elements**. – Robo Robok Dec 10 '17 at 23:00
  • 97
    I probably read both of these answers and the documentation like 7 times before I understood it—`focusout` supports loss of focus on descendant elements and event bubbling, not `blur`. Confusing wording there. Put more simply: `blur` supports losing focus on only the element in question; `focusout` supports losing focus on the element in question and any children. – intcreator Oct 19 '18 at 22:46
  • 7
    @intcreator thank you, I only understood after your explanation. – Leonardo Meinerz Ramos May 20 '19 at 11:58
  • 1
    As much as i tested `focusout` seems to be much better than `blur`! – Ingus May 21 '20 at 11:42
  • 2
    `blur` didnt catch tabbing out of an element `focusout` did – Ricardo Saracino Aug 09 '20 at 18:16
  • I have found simple answer here: https://stackoverflow.com/questions/7858979/difference-between-focusin-focusout-and-focus-blur-with-example – Bhavin Jun 29 '21 at 06:27
138

As stated in the JQuery documentation

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

samjewell
  • 1,068
  • 11
  • 20
nulltoken
  • 64,429
  • 20
  • 138
  • 130