Was ist in Webbrowsern der Unterschied zwischen onblur und onfocusout?

Antworten:

71

Wie Sie wissen, wird das Ereignis onBlur für ein Element ausgelöst, wenn dieses Element den Fokus hatte, ihn jedoch verliert.

Das Ereignis onFocusOut wird in diesem Fall ausgelöst , aber auch ausgelöst , wenn ein untergeordnetes Element den Fokus verliert.

Beispielsweise haben Sie ein Div mit spezieller Formatierung, da der Mensch gerade ein Feld in diesem Bereich bearbeitet. Sie können onFocusOut verwenden , um diese Formatierung zu deaktivieren , wenn der Fokus dieses Div verlässt.

Bis vor kurzem wurde onFocusOut nur vom IE verwendet. Wenn sich das geändert hat, war es sehr neu. Test in FF, Chrome usw.

Patrick Karcher
quelle
5
Update vom November 2012 - Chrome wird immer noch nicht unterstützt onfocusout. jsfiddle.net/4n39h/1
Dan Dascalescu
8
Januar 2014 Ich benutze Onfocusout in Chrom
Snymax
2
onBlur wird ausgelöst, auch wenn die Seite den Fokus verliert
Fez Vrasta
aug 2018, chrome, der e.typefür jQuery on click handler für blurist focusoutund nicht blur, ich verstehe nicht warum.
user1063287
10

Gemäß der Spezifikation für die Focusout- Ereignistyp:

Dieser Ereignistyp ähnelt der Unschärfe, wird jedoch ausgelöst, bevor der Fokus verschoben wird, und sprudelt.

Während blurEreignisse blubbern und später versendet werden.

Luc125
quelle
1

Im Jahr 2017 gibt es im Wesentlichen keinen Unterschied:

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

Nur wenige Webentwickler verwenden bewusst die Erfassung oder das Sprudeln von Ereignissen. Auf Webseiten, wie sie heute erstellt werden, ist es einfach nicht erforderlich, ein sprudelndes Ereignis von mehreren verschiedenen Ereignishandlern behandeln zu lassen. Benutzer können durch mehrere Dinge verwirrt werden, die nach einem Mausklick passieren, und normalerweise möchten Sie Ihre Skripte zur Ereignisbehandlung getrennt halten.

mutatron
quelle
1

Das Focusout-Ereignis wird ausgelöst, wenn ein Element den Fokus verliert.

Der Hauptunterschied zwischen diesem Ereignis und Unschärfe besteht darin, dass Fokusblasen auftreten, während Unschärfe dies nicht tut. Meistens können sie austauschbar verwendet werden.

AUFENTHALT
quelle
0

Die Jquery-Dokumentation enthält eine gute focusoutvs. blurDemo, die ich der Klarheit halber weiter unten wiedergeben werde. Kurz gesagt, wird focusoutausgelöst, wenn der Selektor - $('p')in der Demo - alles enthält, einschließlich der Eingaben und übergeordneten Elemente. Während, blurfeuert nur dann , wenn der Wähler an den Eingängen ist - $('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>
tim peterson
quelle