jQuery - focusin/focusout/focus/blur事件的區別與不同

focus與blur事件：不支持冒泡

focusin與focusout：支持冒泡

事件觸發順序：

對於同時支持這4個事件的瀏覽器，事件執行順序為focusin（聚焦） > focus > focusout（失焦） > blur

HTML代碼：

<div class="parent">
    <input type="text" />
</div>
<div class="log"></div>

JavaScript代碼：

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

結果：

    

   從執行結果可以看到4個事件的執行順序，同時也可以看到 focus/blur是不支持冒泡的，所以.parent 元素綁定的focus和blur事件回調並沒有觸發。