blur (evento)

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

Informação geral

Especificação

DOM L3

Interface
FocusEvent (en-US)
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 (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 com navegadores

BCD tables only load in the browser

Eventos relacionados