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

焦點和模糊事件跟蹤用戶關注的元素。

1. 焦點

   當可聚焦元素獲得焦點時觸發

2. 模糊

   當可聚焦元素失去焦點時觸發

3. 專注和專注

   在聚焦和模糊的同時射擊，但是泡沫。

例如檢查一下

Answer 3

focus 和 focusin 的區別：

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