Javascript 在 Web 浏览器中，onblur 和 onfocusout 之间有什么区别？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7755052/
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
In web browsers, what's the difference between onblur and onfocusout?
提问by lovespring
If they're the same, then why there are two of this kind of event?
如果它们是相同的，那么为什么会有两个这样的事件？
回答by Patrick Karcher
As you know, the onBlurevent fires for an element if that element had the focus, but loses it.
如您所知，如果该元素具有焦点但失去焦点，则会为该元素触发onBlur事件。
The onFocusOutevent fires in this case, but also triggers if any child element loses focus.
该onfocusout在事件触发在这种情况下，也触发如果任何子元素失去焦点。
For example, you have a div with special formatting because the human is currently editing a field in that area. You'd could use onFocusOutto turn that formatting off when focus leaves that div.
例如，您有一个具有特殊格式的 div，因为人类当前正在编辑该区域中的一个字段。当焦点离开该 div 时，您可以使用onFocusOut关闭该格式。
Up until very recently, onFocusOutwas only used by IE. If that has changed, it has been very recent. Test in FF, Chrome, etc.
直到最近，onFocusOut只被 IE 使用。如果这种情况发生了变化，那是最近的事情。在 FF、Chrome 等中测试。
回答by Luc125
回答by mutatron
There's essentially no difference in 2017:
2017年基本没有区别：
https://www.quirksmode.org/js/events_order.html
https://www.quirksmode.org/js/events_order.html
Few web developers consciously use event capturing or bubbling. In Web pages as they are made today, it is simply not necessary to let a bubbling event be handled by several different event handlers. Users might get confused by several things happening after one mouse click, and usually you want to keep your event handling scripts separated.
很少有 Web 开发人员有意识地使用事件捕获或冒泡。在今天制作的网页中，根本没有必要让冒泡事件由几个不同的事件处理程序处理。用户可能会对单击鼠标后发生的一些事情感到困惑，通常您希望将事件处理脚本分开。
回答by ABODE
The focusout event fires when an element is about to lose focus.
当元素即将失去焦点时会触发 focusout 事件。
The main difference between this event and blur is that focusout bubbles while blur does not. Most times, they can be used interchangeably.
此事件与模糊之间的主要区别在于，焦点会出现气泡，而模糊不会。大多数时候，它们可以互换使用。
回答by tim peterson
The Jquery documentation has a good focusoutvs. blurdemowhich I'll reproduce below for clarity. In short, focusoutfires if the selector — $('p')in the demo — is anything including the inputs and parent elements. Whereas, bluronly fires if the selector is on the inputs — $('input').
Jquery 文档有一个很好的focusoutvs.blur演示，为了清楚起见，我将在下面重现。简而言之，focusout如果选择器（$('p')在演示中）是包括输入和父元素在内的任何东西，就会触发。而blur只有在选择器位于输入上时才会触发 — $('input')。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>focusout demo</title>
<style>
.inputs {
float: left;
margin-right: 1em;
}
.inputs p {
margin-top: 0;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div class="inputs">
<p>
<input type="text"><br>
<input type="text">
</p>
<p>
<input type="password">
</p>
</div>
<div id="focus-count">focusout fire</div>
<div id="blur-count">blur fire</div>
<script>
var focus = 0,
blur = 0;
$( "p" )
.focusout(function() {
focus++;
$( "#focus-count" ).text( "focusout fired: " + focus + "x" );
})
.blur(function() {
blur++;
$( "#blur-count" ).text( "blur fired: " + blur + "x" );
});
</script>
</body>
</html>
