blur (evento)

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

O evento blur é acionado quando um elemento perde foco. A diferença principal entre este evento e focusout é que apenas o segundo 'borbulha'.

Informação geral

Especificação

DOM L3

Interface
FocusEvent
Borbulha

Não

Cancelável

Não

Alvo

Elemento

Ação padrão

Nenhuma

Nota: O valor de Document.activeElement varia entre navegadores enquanto este evento é processado (Erro do Firefox 452307): O IE10 define-o para o elemento para onde o foco moverá, enquanto Firefox e Chrome muitas vezes definem-o para o body do documento.

Propriedades

Property Type Description
target Somente leitura EventTarget Event target (DOM element)
type Somente leitura DOMString The type of event.
bubbles Somente leitura Boolean Whether the event normally bubbles or not.
cancelable Somente leitura Boolean Whether the event is cancellable or not.
relatedTarget Somente leitura EventTarget (DOM element) null

Delegação do evento

Existem duas maneiras de implementar a delegação de eventos para este evento: usando o evento focusout nos navegadores que suportam-o, ou definindo o parâmetro "useCapture" do addEventListener para true:

Conteúdo HTML

html
<form id="form">
  <input type="text" placeholder="text input" />
  <input type="password" placeholder="password" />
</form>

Conteúdo JavaScript

js
var form = document.getElementById("form");
form.addEventListener(
  "focus",
  function (event) {
    event.target.style.background = "pink";
  },
  true,
);
form.addEventListener(
  "blur",
  function (event) {
    event.target.style.background = "";
  },
  true,
);

Especificações

Specification
UI Events
# event-type-blur
HTML
# handler-onblur

Compatibilidade com navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
blur event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Has more compatibility info.

Eventos relacionados