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

Question

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

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

983 4

jQuery javascript dom javascript-events

4 ответов:

Comments

Ничего не найдено.

Patrick Karcher · Accepted Answer · 2011-10-13 17:04:48

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

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

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

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

Luc125 · Accepted Answer · 2018-04-25 18:22:15

согласно спецификации для focusout тип события:

этот тип события похож на размытие, но отправляется до смещения фокуса и делает пузырь.

, тогда как blur события делают пузырь, и отправляются позже.

tim peterson · Accepted Answer · 2015-12-29 13:41:21

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

mutatron · Accepted Answer · 2017-11-10 00:53:47

в 2017 году практически нет разницы:

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

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