Javascript focusin/focusout 和 focus/blur 的区别，举个例子
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7858979/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Difference between focusin/focusout and focus/blur, with example
提问by user960567
Can anyone tell me the difference between blurand focusout, focusand focusinwith a simple example?
谁能告诉我之间的区别blur和focusout，focus并focusin用一个简单的例子吗？
回答by Guffa
The focusinand focusoutevents bubble, the focusand blurevents doesn't. That means that you can use the focusinand focusouton the parent element of a form field.
在focusin和focusout事件泡沫，focus而blur事件没有。这意味着您可以在表单字段的父元素上使用focusin和focusout。
Demo: http://jsfiddle.net/pAp4E/
演示：http: //jsfiddle.net/pAp4E/
HTML:
HTML：
<div class="parent">
<input type="text" />
</div>
<div class="log"></div>
Javascript:
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));
}
When you run it, you see that only the input gets all the events, the parent only gets the focusinand focusoutevents.
当您运行它时，您会看到只有输入获取所有事件，父项只获取focusin和focusout事件。
回答by Rupesh Pawar
The focus and blur events keep track of the elements the user focuses on.
focus 和 blur 事件跟踪用户关注的元素。
focus
Fires when a focusable element gains the focus
blur
Fires when a focusable element loses the focus
focusin and focusout
Fire at the same time as focus and blur, but bubble.
重点
当可聚焦元素获得焦点时触发
模糊
当可聚焦元素失去焦点时触发
聚焦和聚焦
在聚焦和模糊的同时发射，但气泡。
for example check this
例如检查这个
