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 元素绑定的focusblur事件回调并没有触发。

 

posted @ 2018-06-05 16:12  渺茫大海  阅读(1903)  评论(0编辑  收藏  举报