Javascript focusin/focusout和focus/blur之间的区别，举例说明

有谁能用一个简单的例子告诉我

blur

和

focusout

，

focus

和

focusin

之间的区别吗？

focusin和

focusout

事件气泡，而

focus

和

blur

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

focusin

和

focusout

演示：

HTML:

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));
}

$（“.parent”）
.focusin（函数（）{log（'div focusin'）；}）
.focusout（函数（）{log（'div focusout'）；}）
.focus（函数（）{log（'div focus'）；}）
.blur（函数（）{log（'div blur'）；}）；
$（“输入”）
.focusin（函数（）{log（'input focusin'）；}）
.focusout（函数（）{log（'input focusout'）；}）
.focus（函数（）{log（'input focus'）；}）
.blur（函数（）{log（'input blur'）；}）；
函数日志（str）{
$（'.log'）.append（$（'.text（str））；
}

---

运行它时，您会看到只有输入获取所有事件，父级仅获取

聚焦in

和

聚焦out

事件。

聚焦和模糊事件跟踪用户聚焦的元素

焦点

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

模糊

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

focusin和focusout

在聚焦和模糊的同时开火，但出现气泡

---

例如，2015年8月-Firefox仍然不支持focusin/focusout（）。伙计，他们真的丢了球…@ArnaudLeyder：是的，它还没有在Firefox中实现，但是jQuery模仿了它。是的，你说得对。因为我没有在此项目中使用jQuery，所以我使用了polyfill：

$('.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));
}