元素：模糊事件

blur 事件在元素失去焦点时触发。该事件不会冒泡，但随后发生的关联 focusout 事件会冒泡。

如果选择另一个元素，则元素将失去焦点。如果应用了不允许焦点的样式（例如 hidden），或者如果元素从文档中删除，元素也将失去焦点 - 在这两种情况下，焦点都将移至 body 元素（视窗）。但是请注意，当被聚焦的元素从文档中删除时，不会触发 blur。

blur 的反义词是 focus 事件，该事件在元素获得焦点时触发。

blur 事件不可取消。

语法

在诸如 addEventListener() 之类的 方法中使用事件名称，或者设置事件处理程序属性。

js
addEventListener("blur", (event) => {});

onblur = (event) => {};

事件类型

一个 FocusEvent。继承自 UIEvent 和 Event。

Event UIEvent FocusEvent

事件属性

此接口还从其父 UIEvent 继承属性，并间接地从 Event 继承属性。

FocusEvent.relatedTarget

接收焦点的元素（如果有）。

示例

简单示例

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

浏览器兼容性

BCD 表格仅在浏览器中加载

在处理此事件期间，Document.activeElement 的值在不同浏览器中有所不同（Firefox 错误 452307）：IE10 将其设置为将要移动焦点的元素，而 Firefox 和 Chrome 通常将其设置为文档的 body。

另请参阅