What's the difference between using focusin / focusout and focus / blur?

Question

What's the difference between using focusin / focusout and focus / blur?

Navigation

#1 by (3 votes)

4

Using jQuery to focus on a specific element, the question arose:

What's the difference between using focusin() versus focus() ?

And focusout() compared to blur() ?

Is there a specific application for each case?

javascript jquery

asked by anonymous 23.03.2017 / 21:47

1 answer

Did the functional features of Java 8 make some design pattern obsolete? Entity Framework - Deleting object with relationship

score 3 · Accepted Answer

Briefly,

.focusin() and .focusout() are events that "bubble", while .focus() and .blur() do not.

Executing the example below you will notice that input calls all events, parent only 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><divclass="parent">
    <input type="text" />
</div>

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

Snippet source: diff between focus focusin