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

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

60 голосов
/ 13 октября 2011

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

Ответы [ 4 ]

62 голосов
/ 13 октября 2011

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

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

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

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

10 голосов
/ 13 октября 2011

В соответствии со спецификацией для типа события focusout :

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

Принимая во внимание, что blur события всплывают и отправляются позже.

1 голос
/ 10 ноября 2017

В 2017 году нет существенной разницы:

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

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

0 голосов
/ 29 декабря 2015

Документация 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...