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

The focusin and focusout events bubble, the focus and blur events doesn't. That means that you can use the focusin and focusout on the parent element of a form field.

Demo: http://jsfiddle.net/pAp4E/

HTML:

<div class="parent">
    <input type="text" />
</div>

<div class="log"></div>

Javascript:

$('.parent')
    .focusin(function(){log('div focusin');})
    .focusout(function(){log('div focusout');})
    .focus(function(){log('div focus');})
    .blur(function(){log('div blur');});
$('input')
    .focusin(function(){log('input focusin');})
    .focusout(function(){log('input focusout');})
    .focus(function(){log('input focus');})
    .blur(function(){log('input blur');});

function log(str){
  $('.log').append($('<div/>').text(str));
}

When you run it, you see that only the input gets all the events, the parent only gets the focusin and focusout events.

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