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
- 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 Standard # handler-onblur |
Compatibilidade com navegadores
BCD tables only load in the browser