focusin/focusout和focus/blur的区别，举例说明

Question

谁能用一个简单的例子告诉我blur和focusout，focus和focusin之间的区别？

Answer 1

focusin和focusout事件冒泡，focus和blur事件不冒泡。这意味着您可以在表单域的父元素上使用focusin和focusout。

演示：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));
}

当您运行它时，您会看到只有输入获取所有事件，父对象只获取focusin和focusout事件。

Answer 2

focus和blur事件跟踪用户关注的元素。

1. 焦点

当可聚焦元素获得焦点

• 模糊时激发

当可聚焦元素失去焦点和焦点输出时激发

在聚焦和模糊的同时发射，但有气泡。

例如check this

Answer 3

焦点和焦点之间的区别：

focus & blur -不冒泡，不能委托，focusin & focusout -气泡到父元素，可以委托。