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