user960567 user960567 - 1 year ago 134
jQuery Question

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

Can anyone tell me the difference between

blur
and
focusout
,
focus
and
focusin
with a simple example?

Answer Source

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.