在web浏览器中，onblur和onfocusout有什么不同？
在web浏览器中，onblur和onfocusout有什么不同？
提问于 2011-10-13 21:43:14
如果它们是一样的，为什么会有两个这样的事件呢？
回答 3
Stack Overflow用户
发布于 2020-05-16 16:04:11
当元素即将失去焦点时，会触发focusout事件。
此事件和模糊之间的主要区别是聚焦气泡，而模糊则不是。大多数情况下，它们可以互换使用。
Stack Overflow用户
发布于 2015-12-29 19:41:22
The Jquery documentation has a good focusout vs. blur demo，为了清楚起见，我将在下面重现它。简而言之，如果选择器--演示中的$('p') --是包括输入和父元素在内的任何元素，就会触发focusout。然而，只有当选择器在inputs $('input')上时，blur才会触发。
<!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>Stack Overflow用户
发布于 2021-10-03 20:56:35
一个小小的演示。请注意，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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7755052
复制相关文章
相似问题
腾讯云开发者
