Was ist in Webbrowsern der Unterschied zwischen onblur und onfocusout?

Question 1

Wenn sie gleich sind, warum gibt es dann zwei solcher Ereignisse?

Question 2

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.

Question 3

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.

Question 4

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.

Question 5

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.

Question 6

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>