在网络浏览器中，onblur 和 onfocusout 有啥区别？
Posted
技术标签:
【中文标题】在网络浏览器中，onblur 和 onfocusout 有啥区别？【英文标题】：In web browsers, what's the difference between onblur and onfocusout?在网络浏览器中，onblur 和 onfocusout 有什么区别？ 【发布时间】：2011-12-06 23:46:13 【问题描述】：如果都一样，那为什么会有两个这样的事件呢？
【问题讨论】：
事件冒泡和捕获的完整解释javascript.info/tutorial/bubbling-and-capturing 【参考方案1】：如您所知，如果元素具有焦点，则 onBlur 事件会触发该元素，但会失去焦点。
在这种情况下会触发 onFocusOut 事件，但也会在任何子元素失去焦点时触发。
例如，您有一个具有特殊格式的 div，因为人类当前正在编辑该区域中的一个字段。当焦点离开该 div 时，您可以使用 onFocusOut 关闭该格式。
直到最近，onFocusOut 只被 IE 使用。如果这种情况发生了变化，那是最近的事情。在 FF、Chrome 等中测试。
【讨论】：
2014 年 1 月我在 chrome 中使用 onfocusout 即使页面失去焦点也会触发 onBlur 2018 年 8 月，chrome，blur 的点击处理程序上 jQuery 的 e.type 是 focusout 而不是 blur，我不明白为什么。【参考方案2】：
根据focusout事件类型的规范：
此事件类型类似于模糊，但在焦点转移之前调度，并且会冒泡。
而blur 事件会冒泡，并在稍后分派。
【讨论】：
【参考方案3】：当元素即将失去焦点时会触发 focusout 事件。
此事件与 blur 的主要区别在于，focusout 会出现气泡，而 blur 不会。大多数情况下，它们可以互换使用。
【讨论】：
【参考方案4】：The Jquery documentation has a good focusout vs. blur demo 为了清楚起见，我将在下面复制。简而言之，如果选择器（演示中的$('p')）是包括输入和父元素在内的任何内容，则focusout 会触发。而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>
【讨论】：
【参考方案5】：2017 年基本没有区别：
https://www.quirksmode.org/js/events_order.html
很少有网络开发人员有意识地使用事件捕获或冒泡。在今天制作的网页中，根本没有必要让几个不同的事件处理程序来处理冒泡事件。用户可能会对单击鼠标后发生的几件事感到困惑，通常您希望将事件处理脚本分开。
【讨论】：
【参考方案6】：一个小演示。注意 focusin/focusout 的父 div 改变了它的颜色。
div
background-color: #eee;
padding: 5px;
<div onfocusin="this.style['background-color']='#efe'"
onfocusout="this.style['background-color']='#eef'">
<input onfocusin="this.value='focusin'"
onfocusout="this.value='focusout'"
placeholder="focusin/focusout" /> bubbling
</div>
<div onfocus="this.style['background-color']='#efe'"
onblur="this.style['background-color']='#eef'">
<input onfocus="this.value='focus'"
onblur="this.value='blur'"
placeholder="focus/blur" /> not bubbling
</div>【讨论】：
以上是关于在网络浏览器中，onblur 和 onfocusout 有啥区别？的主要内容，如果未能解决你的问题，请参考以下文章
对于给定的浏览器，我如何确定哪些元素支持哪些事件？ [关闭]
064_Js常用的五大事件 onclick nochanger onload onsubmit onblur
JS事件 失焦事件（onblur）onblur事件与onfocus是相对事件，当光标离开当前获得聚焦对象的时候，触发onblur事件，同时执行被调用的程序。