JavaScript中监听表单焦点用focus/blur事件，focusin/focusout支持事件委托；blur不冒泡而focusin/focusout可冒泡；常用于校验、样式切换等场景。
在 JavaScript 中，监听表单元素（如 input、textarea、select）的获取焦点（focus）和失去焦点（blur）事件，主要通过 focus 和 blur 事件实现。这两个事件是原生、冒泡的（blur 在标准中**不冒泡**，但可通过事件委托配合 focusout 实现类似效果），适用于实时校验、样式切换、提示显示等场景。
基础用法：直接绑定 focus 和 blur
对单个表单元素，可使用 addEventListener 或简写的 onfocus/onblur：
-
focus：元素获得焦点时触发（例如用户点击或按 Tab 进入） -
blur：元素失去焦点时触发（例如点击别处、按 Tab 离开）
示例：
const input = document.querySelector('#username');
input.addEventListener('focus', () => {
console.log('输入框已获得焦点');
input.classList.add('focused');
});
input.addEventListener('blur', () => {
console.log('输入框已失去焦点');
input.classList.remove('focused');
});
监听整个表单内所有可聚焦元素（事件委托）
若表单含多个字段，逐个绑定较繁琐。可利用 focusin 和 focusout —— 它们是 focus/blur 的**冒泡版本**，支持事件委托：
立即学习“Java免费学习笔记（深入）”；
-
focusin冒泡，可监听父容器（如form）捕获其内部任意子元素的聚焦 -
focusout同理，用于捕获失焦（注意：不是blur，因blur不冒泡）
示例：
const form = document.querySelector('form');
form.addEventListener('focusin', (e) => {
if (e.target.matches('input, select, textarea')) {
e.target.classList.add('active-field');
}
});
form.addEventListener('focusout', (e) => {
if (e.target.matches('input, select, textarea')) {
e.target.classList.remove('active-field');
}
});
注意焦点事件的特殊行为
实际开发中需留意几个关键点：
-
blur和focusout都会在焦点离开当前元素时触发，但focusout能在父级监听，blur必须绑定到目标元素本身 - 点击按钮、切换窗口、按 Alt+Tab 等操作可能导致焦点离开页面，此时
blur仍会触发，但无法保证下一个聚焦元素是页面内的 - 程序化调用
element.focus()会同步触发focus事件；而element.blur()会触发blur - 某些元素（如
div）默认不可聚焦，需添加tabindex属性才能响应焦点事件
结合表单校验的实用场景
常见做法是在 blur 时校验字段，在 focus 时清除错误提示：
const emailInput = document.getElementById('email');
emailInput.addEventListener('focus', () => {
const errorEl = emailInput.nextElementSibling;
if (errorEl && errorEl.classList.contains('error')) {
errorEl.textContent = '';
errorEl.classList.remove('error');
}
});
emailInput.addEventListener('blur', () => {
const value = emailInput.value.trim();
const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
const errorEl = emailInput.nextElementSibling;
if (!isValid && value) {
errorEl.textContent = '请输入有效的邮箱';
errorEl.classList.add('error');
}
});
