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

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 Standard # handler-onblur

Compatibilidade com navegadores

BCD tables only load in the browser