Question

如果它们是相同的，那为什么会有两种这样的事件呢？

Answer 1

如您所知，如果该元素具有焦点，则会激活 onBlur 事件，但会丢失它。

在这种情况下会触发 onFocusOut 事件，但如果任何子元素失去焦点，也会触发。

例如，您有一个具有特殊格式的div，因为人类当前正在编辑该区域中的字段。当焦点离开该div时，您可以使用 onFocusOut 关闭该格式。

直到最近， onFocusOut 才被IE使用。如果情况发生了变化，那就是最近的情况。在FF，Chrome等中进行测试

Answer 2

根据focusout事件类型的规范：

此事件类型与模糊类似，但会在焦点移动之前调度，并确实会冒泡。

尽管blur事件会冒泡，但稍后会发送。

Answer 3

2017年基本没有区别：

https://www.quirksmode.org/js/events_order.html

很少有网络开发人员有意识地使用事件捕获或冒泡。在今天制作的网页中，没有必要让几个不同的事件处理程序处理冒泡事件。用户可能会在单击鼠标后发生一些事情而感到困惑，通常您希望将事件处理脚本分开。

Answer 4

当元素即将失去焦点时，触发聚焦事件。

此事件与模糊之间的主要区别在于，焦点突出时会冒泡，而模糊不会。大多数时候，它们可以互换使用。

Answer 5

The Jquery documentation has a good focusout vs. blur demo为了清楚起见，我将在下面重现。简而言之，如果演示中的选择器 - 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>

在网络浏览器中，onblur和onfocusout之间的区别是什么？

5 个答案: