wake-up-neo.net

Was ist der Unterschied zwischen Onblur und OnFocusout in Webbrowsern?

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

javascriptjquerydomjavascript-events
59
lovespring

Wie Sie wissen, wird das Ereignis onBlur für ein Element ausgelöst, wenn dieses Element den Fokus hatte, es 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 einer speziellen Formatierung, da der Benutzer gerade ein Feld in diesem Bereich bearbeitet. Sie könnten onFocusOut verwenden, um die Formatierung zu deaktivieren, wenn der Fokus das div verlässt.

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

61
Patrick Karcher

Entsprechend der Spezifikation für den focusout Ereignistyp: 

Dieser Ereignistyp ähnelt Unschärfe, wird jedoch ausgelöst, bevor der Fokus verschoben wird, und führt Blasen aus.

Während blur Ereignisse blubbern und später gesendet werden.

10
Luc125

Es gibt im Wesentlichen keinen Unterschied in 2017:

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

Nur wenige Webentwickler verwenden bewusst das Event-Capturing oder -Bubbling. Bei Webseiten, wie sie heute gemacht werden, ist es einfach nicht notwendig, ein blubberndes Ereignis von mehreren verschiedenen Ereignisbehandlern behandeln zu lassen. Benutzer werden durch mehrere Dinge nach einem Mausklick verwirrt. Normalerweise möchten Sie, dass Ihre Ereignisbehandlungsskripts getrennt bleiben. 

1
mutatron

Die Jquery-Dokumentation hat eine gute focusout vs. blur-Demo , die ich zur Verdeutlichung unten wiedergeben werde. Kurz gesagt, focusout wird ausgelöst, wenn der Selektor - $('p') in der Demo - alle Eingaben und übergeordneten Elemente enthält. Während blur nur ausgelöst wird, wenn der Selektor auf den Eingängen - $('input') - steht.

<!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