web-dev-qa-db-ja.com

Webブラウザーでは、onblurとonfocusoutの違いは何ですか？

それらが同じ場合、なぜこの種のイベントが2つあるのでしょうか？

javascriptjquerydomjavascript-events
61
lovespring

ご存知のように、要素にフォーカスがあった場合、その要素に対してonBlurイベントが発生しますが、それは失われます。

onFocusOutイベントはこの場合に発生しますが、子要素がフォーカスを失った場合にもトリガーします。

たとえば、人間は現在その領域のフィールドを編集しているため、特別なフォーマットのdivがあります。 onFocusOutを使用して、フォーカスがそのdivから離れたときにそのフォーマットをオフにすることができます。

ごく最近まで、onFocusOutはIEでのみ使用されていました。それが変更された場合、それはごく最近のものです。 FF、Chromeなどでテストする.

62
Patrick Karcher

focusout イベントタイプの仕様によると：

このイベントタイプはブラーに似ていますが、フォーカスが移動する前に送出され、バブルします。

一方、blurイベントはバブルし、後でディスパッチされます。

10
Luc125

2017年には本質的に違いはありません。

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

イベントキャプチャまたはバブリングを意識的に使用するWeb開発者はほとんどいません。今日作成されているWebページでは、バブリングイベントをいくつかの異なるイベントハンドラーで処理する必要はありません。ユーザーは、マウスを1回クリックすると発生するいくつかのことに混乱する可能性があります。通常は、イベント処理スクリプトを分離しておく必要があります。

1
mutatron

Jqueryのドキュメントにはfocusoutと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>
0
tim peterson