在网络浏览器中，onblur和onfocusout有什么区别？

69

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

— 爱之泉
source

1

事件冒泡和捕获的完整说明javascript.info/tutorial/

— Mikhail

71

如您所知，如果某个元素具有焦点，则onBlur事件将为该元素触发，但会丢失该焦点。

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

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

直到最近，onFocusOut仅由IE使用。如果情况有所改变，那是最近的事了。在FF，Chrome等中测试

— 帕特里克·凯彻
source

5

2012年11月更新-Chrome仍不支持onfocusout。jsfiddle.net/4n39h/1

— Dan Dascalescu 2012年

8

2014年1月即时通讯在Chrome中使用onfocusout

— Snymax

2

即使页面失去焦点，也会触发onBlur

— Fez Vrasta '16

AUG 2018，镀铬，在e.typejQuery的上点击处理程序blur是focusout，不blur，我不明白为什么。

— user1063287

10

根据针对焦点事件类型的规范：

此事件类型类似于模糊，但在焦点转移之前分派，并且会冒泡。

而blur事件做泡，后来又被分派。

— 卢克125
source

1

2017年基本上没有区别：

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

很少有Web开发人员自觉使用事件捕获或冒泡。在当今的网页中，根本不必让冒泡事件由多个不同的事件处理程序处理。一次单击鼠标后，用户可能会对发生的几件事感到困惑，并且通常您希望将事件处理脚本分开。

— 诱变剂
source

1

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

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

— 居留权
source

0

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>

— 蒂姆·彼得森
source