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