Esta página ha sido traducida del inglés por la comunidad.Aprende más y únete a la comunidad de MDN Web Docs.
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 julio de 2015.
El eventoblur es disparado cuando un elemento ha perdido su foco. La diferencia principal entre este evento yfocusout es que sólo el último se propaga (bubbles).
Información General
- Especificación
- Interfaz
FocusEvent- Burbujas
No
- Cancelable
No
- Objetivo
Element
- Acción por defecto
Ninguna.
Nota:El valor deDocument.activeElement varía a traves de navegadores mientras este evento está siendo manejado (Error 452307 en Firefox): IE10 lo agrega al elemento al cual el foco se movera, mientras Firefox y Chrome muy seguido lo agregan al cuerpo del documento.
Propiedades
| Propiedad | Tipo | Descripción |
|---|---|---|
targetRead only | EventTarget | Objetivo del evento (elemento DOM) |
typeRead only | DOMString | El tipo de evento. |
bubblesRead only | Boolean | Si el elemento normalmente se propaga o no. |
cancelableRead only | Boolean | Si el evento es cancelable o no. |
relatedTargetRead only | EventTarget (DOM element) | null |
Delegación de eventos
Hay dos maneras de implementar la delegación de eventos para este evento: usando el eventofocusout en exploradores que lo soporten, o cambiando el parámetro "useCapture" deaddEventListener atrue:
Contenido HTML
<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,);Especificaciones
| Specification |
|---|
| UI Events # event-type-blur |
| HTML # handler-onblur |