focus/blur是监听元素获得/失去焦点最直接可靠的方式，仅在实际键盘/鼠标聚焦时触发，需元素可聚焦（如设tabindex）；推荐addEventListener而非onfocus属性，focusin/focusout支持事件委托。
focus 和 blur 是监听元素获得/失去焦点最直接、最可靠的方式，无需依赖框架或 polyfill，原生支持所有可聚焦元素（input、textarea、select、带 tabindex 的 div 等）。
focus 和 blur 事件的基本行为
这两个事件只在元素**实际获得或失去键盘/鼠标焦点**时触发，不是“被点击就触发”，也不是“样式变化就触发”。关键前提是：元素必须是可聚焦的（例如 input 默认可聚焦；div 需显式加 tabindex="0"）。
-
focus在用户 Tab 进入、鼠标点击、或 JS 调用.focus()时触发 -
blur在用户 Tab 离开、点击别处、或 JS 调用.blur()时触发 - 它们不冒泡（
focus/blur本身），但对应可冒泡的focusin/focusout可用于委托 - 不要混用
onfocus属性和addEventListener('focus', ...)—— 后者更可控，前者会覆盖
为什么不用 onfocus/onblur 属性写法
直接在 HTML 标签里写 onfocus="handleFocus()" 看似简单，但容易出问题：
- 无法传参或访问闭包变量，逻辑受限
- 多个同类型事件绑定时会相互覆盖（
el.onfocus = fn1; el.onfocus = fn2;→ 只剩fn2） - 不利于解绑（比如组件卸载时需清理），易引发内存泄漏
- 不符合现代 DOM 操作习惯，Vue/React 等框架也不鼓励这种写法
推荐统一用 addEventListener：
立即学习“前端免费学习笔记（深入）”；
生成HTML格式PPT
下载
从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。
const input = document.getElementById('username');
input.addEventListener('focus', () => {
input.classList.add('focused');
});
input.addEventListener('blur', () => {
if (!input.value.trim()) {
input.classList.add('error');
}
});
focusin/focusout 适合事件委托场景
如果要监听整个表单内所有输入框的焦点变化（比如统一高亮、记录操作路径），用 focusin 和 focusout 更合适 —— 它们会冒泡，可以只绑一次：
-
focusin冒泡，等价于“子元素 focus + 向上冒泡” -
focusout冒泡，等价于“子元素 blur + 向上冒泡” - 注意：
focusin不等于focus+event.stopPropagation()，它本质是另一个事件流
示例：监听整个 form 的任意字段聚焦状态
const form = document.querySelector('form');
form.addEventListener('focusin', (e) => {
if (e.target.matches('input, textarea, select')) {
form.dataset.lastFocused = e.target.name || e.target.id;
}
});
常见陷阱与兼容性提醒
看似简单的焦点事件，实际有几个高频翻车点：
-
blur在移动端 Safari 中可能延迟触发（尤其软键盘收起后），建议配合input或change做兜底校验 -
focus在 iOS 上对div[contenteditable]支持不稳定，慎用 - 动态插入的元素（如 JS 创建的
input）不会自动继承已绑定的focus/blur，必须重新绑定或改用focusin委托 - 调用
.focus()时若元素被display: none或visibility: hidden隐藏，会静默失败，无报错
真正要注意的不是“怎么绑”，而是“什么时候能可靠触发”——尤其在混合了 modal、iframe、移动端软键盘的场景下，focusin/focusout + 显式 tabindex 控制，比单纯依赖用户交互更可控。
