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事件回調并沒有觸發。

?

轉載于:https://www.cnblogs.com/jie888/p/9140332.html

總結

以上是生活随笔為你收集整理的jQuery - focusin/focusout/focus/blur事件的区别与不同的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。