событие blur

Событие blur отправляется элементу, когда он теряет фокус. Изначально это событие применялось только к элементам форм, таким как <input>. В современных браузерах область события расширена, включив в себя все типы элементов. Элемент может потерять фокус с помощью команд клавиатуры, таких как клавиша Tab, или щелчком мыши в другом месте страницы.

Например, рассмотрим HTML:

<form>
  <input id="target" type="text" value="Field 1">
  <input type="text" value="Field 2">
</form>
<div id="other">
  Trigger the handler
</div>

Обработчик события можно привязать к первому полю ввода:

$( "#target" ).on( "blur", function() {
  alert( "Handler for `blur` called." );
} );

Теперь, если у первого поля фокус, щелчок в другом месте или переход к следующему элементу с помощью Tab выведет сообщение об alert:

Обработчик события `blur` вызван.

Чтобы вызвать событие программно, вызовите .trigger( "blur" ):

$( "#other" ).on( "click", function() {
  $( "#target" ).trigger( "blur" );
} );

После выполнения этого кода щелчки по Вызвать обработчик также приведут к отображению сообщения об alert.

Событие blur не «пузырится». С версии 1.4.2 jQuery обходит это ограничение, отображая blur как событие focusout в методах делегирования событий.

Встроенное событие blur асинхронно во всех версиях IE, в отличие от других браузеров. Чтобы избежать проблем, связанных с этим различием, начиная с jQuery 3.7.0, jQuery использует focusout в качестве встроенного события для blur в IE.

См. описание для .on( "blur", ... ).