如何通过HTML的focus和blur事件监听元素的聚焦与失焦状态-html教程-PHP中文网

focus 和 blur 事件仅触发于原生可聚焦元素（如 input、textarea、button、a[href]、iframe）或显式设置 tabindex/contenteditable 的元素；blur 不冒泡，委托需用 focusout；推荐用 addeventlistener 绑定并同步状态变量。

如何通过html的focus和blur事件监听元素的聚焦与失焦状态

focus 和 blur 事件只能监听“可聚焦元素”的状态变化，普通 div、span 默认不触发——必须加 tabindex 或 contenteditable 才能用。

哪些元素原生支持 focus/blur

以下元素在未禁用（即无 disabled 属性）时，天然响应 focus 和 blur：

input、textarea、select、button
a[href]（带 href 的链接）
iframe
任何设置了 tabindex 属性的元素（如 tabindex="0"）
任何设置了 contenteditable="true" 的元素

注意：tabindex="-1" 允许脚本调用 .focus()，但不能通过 Tab 键进入；tabindex="0" 表示按 DOM 顺序参与 Tab 流；负值 tabindex 不影响 Tab 顺序，仅用于程序聚焦。

为什么直接写 onfocus/onblur 容易出问题

内联写法看似简单，但有明确缺陷：

onfocus 和 onblur 是单值属性，重复赋值会覆盖前一个处理函数
无法区分用户是否真实输入过（比如清空后失焦，提示文案又恢复，造成体验错乱）
在 Vue/React 等框架中，this.value 可能被响应式系统接管，直接操作 DOM 值会失效
禁用状态（disabled）下事件完全不触发，但内联写法没地方做前置判断

推荐统一用 addEventListener：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

const input = document.querySelector('input');
let hasInput = false;

input.addEventListener('focus', () => {
  if (input.value === '请输入邮箱') {
    input.value = '';
  }
  input.classList.add('focused');
});

input.addEventListener('input', () => {
  hasInput = true;
});

input.addEventListener('blur', () => {
  if (!input.value && !hasInput) {
    input.value = '请输入邮箱';
  }
  input.classList.remove('focused');
});

blur 事件不冒泡，委托要用 focusout

如果你希望在表单容器上统一监听子输入框的失焦，不能用 blur 绑定在父元素上——它根本不会到达那里。

blur 和 focus 都不冒泡，只作用于目标元素自身
需要事件委托时，改用 focusout（对应 focusin）
focusout 在现代浏览器（IE9+、Chrome、Firefox、Safari）均支持

例如：

const form = document.querySelector('form');
form.addEventListener('focusout', (e) => {
  if (e.target.matches('input, textarea')) {
    console.log('子输入框失焦：', e.target.name);
  }
});