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 julho de 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
- 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
<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 # handler-onblur |
Compatibilidade com navegadores
Loading…