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

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

Источник

7 ответов

Решение

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

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

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

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

Источник

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

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

В то время как blur события всплывают и отправляются позже.

Источник

Маленькая демонстрация. Обратите внимание, что родительский div для focusin/focusout меняет свой цвет.

Источник

Событие focusout срабатывает, когда элемент собирается потерять фокус.

Основное различие между этим событием и размытием заключается в том, что фокусировка всплывает, а размытие - нет. В большинстве случаев их можно использовать как взаимозаменяемые.

Источник

По сути, нет никакой разницы в 2017 году:

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

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

Источник

Есть два отличия:

  1. пузырь, в то время как нет, и
  2. focusin/focusoutзапускаются непосредственно перед смещением фокуса, а focus/blurслучиться после этого

https://developer.mozilla.org/en-US/docs/Web/API/Element/focusout_event
https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event

Источник

Документация 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>
Источник
Другие вопросы по тегам