元素：blur 事件
当一个元素失去焦点时，会触发 blur 事件。该事件不会冒泡，但随后会触发相关的 focusout 事件，该事件会冒泡。
当另一个元素被选中时，元素会失去焦点。当应用于元素的样式不允许获得焦点（例如 hidden）或元素从文档中移除时，元素也会失去焦点——在这两种情况下，焦点都会移至 body 元素（视口）。但请注意，当获得焦点的元素从文档中移除时，不会触发 blur。
与 blur 事件相反的是 focus 事件，当元素获得焦点时会触发此事件。
blur 事件是不可取消的。
语法
在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。
js
addEventListener("blur", (event) => { })
onblur = (event) => { }
事件类型
一个 FocusEvent。继承自 UIEvent 和 Event。
事件属性
此接口还继承了其父级 UIEvent 的属性，以及间接继承自 Event 的属性。
-
获得焦点的元素（如果存在）。
示例
简单示例
HTML
html
<form id="form">
<label>
Some text:
<input type="text" placeholder="text input" />
</label>
<label>
Password:
<input type="password" placeholder="password" />
</label>
</form>
JavaScript
js
const password = document.querySelector('input[type="password"]');
password.addEventListener("focus", (event) => {
event.target.style.background = "pink";
});
password.addEventListener("blur", (event) => {
event.target.style.background = "";
});
结果
事件委托
有两种方法可以实现此事件的事件委托：使用 focusout 事件，或将 addEventListener() 的 useCapture 参数设置为 true。
HTML
html
<form id="form">
<label>
Some text:
<input type="text" placeholder="text input" />
</label>
<label>
Password:
<input type="password" placeholder="password" />
</label>
</form>
JavaScript
js
const form = document.getElementById("form");
form.addEventListener(
"focus",
(event) => {
event.target.style.background = "pink";
},
true,
);
form.addEventListener(
"blur",
(event) => {
event.target.style.background = "";
},
true,
);
结果
规范
| 规范 |
|---|
| UI 事件 # event-type-blur |
| HTML # handler-onblur |
浏览器兼容性
加载中…
在处理此事件时，Document.activeElement 的值在不同浏览器中有所不同（Firefox bug 452307）：IE10 将其设置为焦点将要移到的元素，而 Firefox 和 Chrome 通常将其设置为文档的 body。
另见
HTMLElement.blur()方法- 相关事件：
focus、focusin、focusout - 此
Window上的事件目标：blur事件 - 聚焦：focus/blur