焦点/焦点和焦点/模糊之间的差异,例如

时间:2011-10-22 10:53:47

标签: javascript jquery

有人可以通过一个简单的例子告诉我blurfocusoutfocusfocusin之间的区别吗?

2 个答案:

答案 0 :(得分:53)

focusinfocusout事件气泡,focusblur事件没有。这意味着您可以在表单字段的父元素上使用focusinfocusout

演示: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));
}

当您运行它时,您会看到只有输入才能获取所有事件,父级只会获得focusinfocusout个事件。

答案 1 :(得分:10)

焦点和模糊事件会跟踪用户关注的元素。

  1. 焦点

    当可聚焦元素获得焦点时触发

  2. 模糊

    当可聚焦元素失去焦点时触发

  3. 关注焦点和焦点

    在焦点和模糊的同时开火,但是泡沫。

  4. 例如check this