web-dev-qa-db-fra.com

Dans les navigateurs Web, quelle est la différence entre onblur et onfocusout?

S'ils sont identiques, pourquoi y en a-t-il deux?

javascriptjquerydomjavascript-events
59
lovespring

Comme vous le savez, l'événement onBlur est déclenché pour un élément si celui-ci avait le focus, mais le perd.

L'événement onFocusOut se déclenche dans ce cas, mais se déclenche également si un élément enfant perd le focus.

Par exemple, vous avez une div avec une mise en forme spéciale car l’homme est en train de modifier un champ dans cette zone. Vous pouvez utiliser onFocusOut pour désactiver cette mise en forme lorsque la div reste active.

Jusqu'à tout récemment, onFocusOut n'était utilisé que par IE. Si cela a changé, c'est très récent. Test en FF, Chrome, etc.

61
Patrick Karcher

Selon les spécifications du type d'événement focusout : 

Ce type d'événement est similaire au flou, mais il est distribué avant le déplacement de la mise au point et fait une bulle.

Considérant que blur événements font des bulles, et sont expédiés plus tard.

10
Luc125

Il n'y a pratiquement pas de différence en 2017:

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

Peu de développeurs Web utilisent consciemment la capture ou le bullage d'événements. Dans les pages Web telles qu’elles sont créées aujourd’hui, il n’est tout simplement pas nécessaire de laisser un événement en ébullition être géré par plusieurs gestionnaires d’événements différents. Les utilisateurs peuvent être désorientés par plusieurs choses qui se produisent après un clic de souris et vous souhaitez généralement que vos scripts de gestion d'événements soient séparés. 

1
mutatron

La documentation Jquery a une bonne démo focusout vs. blur / que je vais reproduire ci-dessous pour plus de clarté. En bref, focusout se déclenche si le sélecteur - $('p') dans la démo - est constitué de tout ce qui comprend les entrées et les éléments parents. Considérant que, blur ne se déclenche que si le sélecteur est sur les entrées - $('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