blur (evento)
El evento blur
es disparado cuando un elemento ha perdido su foco. La diferencia principal entre este evento y focusout
es que sólo el último se propaga (bubbles).
Información General
- Especificación
- DOM L3
- Interfaz
FocusEvent
(en-US)- Burbujas
- No
- Cancelable
- No
- Objetivo
- Element
- Acción por defecto
- Ninguna.
Propiedades
Propiedad | Tipo | Descripción |
---|---|---|
target Read only |
EventTarget |
Objetivo del evento (elemento DOM) |
type Read only |
DOMString |
El tipo de evento. |
bubbles Read only |
Boolean |
Si el elemento normalmente se propaga o no. |
cancelable Read only |
Boolean |
Si el evento es cancelable o no. |
relatedTarget Read only |
EventTarget (DOM element) |
null |
Delegación de eventos
Hay dos maneras de implementar la delegación de eventos para este evento: usando el evento focusout
en exploradores que lo soporten, o cambiando el parámetro "useCapture" de addEventListener
a true
:
Contenido HTML
<form id="form">
<input type="text" placeholder="text input">
<input type="password" placeholder="password">
</form>
Contenido 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);
Compatibilidad en navegadores
BCD tables only load in the browser