Differenza tra focusin/focusout e focus/blur, con esempio

Question

Qualcuno può dirmi la differenza tra blur e focusout, focus e focusin con un semplice esempio?

Answer 1

La bolla di eventi focusin e focusout, gli eventi focus e blur no. Ciò significa che è possibile utilizzare focusin e focusout sull'elemento padre di un campo modulo.

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)); 
} 

quando lo si esegue, si vede che solo l'ingresso riceve tutti gli eventi, il genitore ottiene solo il focusin e focusout eventi.

Answer 2

Gli eventi di messa a fuoco e sfocatura tengono traccia degli elementi su cui l'utente si concentra.

1. fuoco

   Viene eseguito quando un elemento attivabile guadagna il focus

2. sfocatura

   Viene eseguito quando un elemento attivabile perde il focus

3. focusIn e focusOut

   Fuoco alla s tempo come messa a fuoco e sfocatura, ma bolla.

per esempio check this