В веб-браузерах, какая разница между onblur и onfocusout?

Если они совпадают, то почему есть два таких события?

Ответ 1

Как вы знаете, событие onBlur запускается для элемента, если этот элемент имеет фокус, но теряет его.

Событие onFocusOut срабатывает в этом случае, но также запускается, если какой-либо дочерний элемент теряет фокус.

Например, у вас есть div со специальным форматированием, потому что человек в настоящее время редактирует поле в этой области. Вы могли бы использовать onFocusOut, чтобы отключить это форматирование, когда фокус покидает этот div.

До недавнего времени onFocusOut использовался только IE. Если это изменилось, это было совсем недавно. Тест в FF, Chrome и т.д.

Ответ 2

Событие onfocusout является нестандартным событием, которое работает только в Internet Explorer, а событие onblur является частью стандартов W3C и работает в каждом современном браузере.

Ответ 3

Документация 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>

Ответ 4

В 2017 году разница не изменилась:

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

Несколько веб-разработчиков сознательно используют захват событий или пузырь. На веб-страницах, как они сделаны сегодня, просто не нужно позволять обрабатывать событие пузыря несколькими обработчиками событий. Пользователи могут запутаться в нескольких вещах, происходящих после одного щелчка мыши, и обычно вы хотите разделить сценарии обработки событий.