javascript - 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 事件。