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

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


javascript jquery dom dom-events
person lovespring    schedule 13.10.2011    source источник
comment
полное объяснение всплытия событий и записи javascript.info/tutorial/bubbling-and-capturing   -  person Mikhail    schedule 24.01.2016

Ответы (5)


arrow_upward
73
arrow_downward

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

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

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

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

person Patrick Karcher    schedule 13.10.2011
comment
Обновление от ноября 2012 г. - Chrome по-прежнему не поддерживает onfocusout. jsfiddle.net/4n39h/1 - person Dan Dascalescu; 13.11.2012
comment
Январь 2014 я использую onfocusout в Chrome - person Snymax; 09.01.2015
comment
onBlur запускается, даже если страница теряет фокус - person Fez Vrasta; 26.04.2016
comment
авг 2018, хром, e.type для jQuery обработчик кликов для blur - это focusout, а не blur, я не понимаю, почему. - person user1063287; 30.08.2018

arrow_upward
10
arrow_downward

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

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

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

person Luc125    schedule 13.10.2011

arrow_upward
1
arrow_downward

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

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

person ABODE    schedule 16.05.2020

arrow_upward
0
arrow_downward

В документации Jquery есть хорошая демонстрация focusout vs. 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>
person tim peterson    schedule 29.12.2015

arrow_upward
0
arrow_downward

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

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

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

person mutatron    schedule 09.11.2017