HTML中如何监听元素获得和失去焦点事件-html教程-PHP中文网

focus/blur是监听元素获得/失去焦点最直接可靠的方式，仅在实际键盘/鼠标聚焦时触发，需元素可聚焦（如设tabindex）；推荐addEventListener而非onfocus属性，focusin/focusout支持事件委托。

html中如何监听元素获得和失去焦点事件

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：

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 更合适 —— 它们会冒泡，可以只绑一次：

生成HTML格式PPT

从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。

下载

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;
  }
});