Difference between focusin/focusout and focus/blur, with example

Question

Can anyone tell me the difference between blur and focusout, focus and focusin with a simple example?

Answer 1

The focus and blur events keep track of the elements the user focuses on.

1. focus

   Fires when a focusable element gains the focus

2. blur

   Fires when a focusable element loses the focus

3. focusin and focusout

   Fire at the same time as focus and blur, but bubble.

for example check this