blur (evento)

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

Note: O valor de Document.activeElement varia entre navegadores enquanto este evento é processado (bug 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 

<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);

Compatibilidade entre navegadores

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar!
Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Suporte básico 5 (Yes) (Yes)[1] 6 12.1 5.1
Feature Android Chrome para Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suporte básico 4.0 53 (Yes) ? 10.0 12.1 5.1

[1] Antes do Gecko 24 (Firefox 24 / Thunderbird 24 / SeaMonkey 2.21) a interface para este elemento era Event, não FocusEvent. Veja (bug 855741).

Eventos relacionados