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
事件回调并没有触发。