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

Answer 2

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