javascript - not - Diferencia entre focusin/focusout y focus/blur, con el ejemplo

onfocus blur jquery

Question

¿Alguien puede decirme la diferencia entre blur y focusout , focus y focusin con un simple ejemplo?

Answer 1

Los eventos de focus y focus burbujean, el focus y los eventos de blur no. Eso significa que puede usar el focusin y el focusout en el elemento padre de un campo de formulario.

Demostración: 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));
}

Cuando lo ejecutas, ves que solo la entrada obtiene todos los eventos, el padre solo obtiene los eventos de focusin y de focusout .

Answer 2

Los eventos de enfoque y desenfoque mantienen un registro de los elementos en los que el usuario se enfoca.

1. atención

   Dispara cuando un elemento enfocable gana el foco

2. difuminar

   Dispara cuando un elemento enfocable pierde el foco

3. focusin y focusout

   Dispara al mismo tiempo que el enfoque y el desenfoque, pero burbujea.

por ejemplo verifique esto