What is the difference between using focusin/focusout and Focus/Blur?

Question

Using jQuery to focus on a specific element raised the doubt:

What’s the difference between using focusin() in relation to focus()?

And focusout() in relation to the blur()?

Is there any specific application for each case?

Answer 1

Briefly,

.focusin() and .focusout() are events that "bubble" while .focus() and .blur() nay.

Running the example below you will notice that the input calls all events, the parent only the focusin and focusout.

Obs* "Bubbling" is the concept that defines the propagation of an event to different levels of the DOM hierarchy.

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

$('.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');});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
    <input type="text" />
</div>

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

Fonte Snippet: diff between Focus focusin