别只知道onclick！html5表单元素还藏着12个“超好用”的监听事件

原创已于 2025-10-16 09:21:47 修改 · 382 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #前端 #html #javascript #ajax #ecmascript #typescript

于 2025-10-16 09:20:36 首次发布

javascript 同时被 2 个专栏收录

47 篇文章

订阅专栏

HTML5

34 篇文章

订阅专栏

文章目录

别只知道onclick！html5表单元素还藏着12个“超好用”的监听事件

别只知道onclick！html5表单元素还藏着12个“超好用”的监听事件

一、输入与值变化事件

1. `input` 事件

功能：当表单元素的输入值发生变化时实时触发（支持键盘输入、粘贴、拖拽、语音输入等所有输入方式）。
适用元素：input（text/password/number等）、textarea、select（部分浏览器）。
代码示例：实时检测用户名输入长度

<input type="text" id="username" placeholder="输入用户名">
<span id="usernameHint"></span>

<script>
const username = document.getElementById('username');
const hint = document.getElementById('usernameHint');

username.addEventListener('input', (e) => {
  const length = e.target.value.length;
  hint.textContent = `已输入 ${length} 个字符（至少6个）`;
  hint.style.color = length >= 6 ? 'green' : 'red';
});
</script>

注意事项：
- 触发频率极高，避免在处理函数中执行复杂操作
- 与change事件的区别：不要求元素失去焦点，值一变化就触发

2. `change` 事件

功能：当表单元素的值发生变化且元素失去焦点时触发（或对于select元素，选中项变化时立即触发）。
适用元素：所有表单元素（input、select、textarea、checkbox、radio等）。
代码示例：检测下拉菜单选择变化

<select id="city">
<option value="">请选择城市</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
</select>

<script>
document.getElementById('city').addEventListener('change', (e) => {
  const selectedCity = e.target.value;
  if (selectedCity) {
    console.log(`选择了城市：${selectedCity}`);
    // 加载对应城市的数据
    loadCityData(selectedCity);
  }
});
</script>

注意事项：
- 对于文本输入框，需要先修改值再失去焦点才会触发
- select元素选中项变化时无需失去焦点即可触发

3. `select` 事件

功能：当用户选中文本框或文本区域中的部分文字时触发。
适用元素：input（文本类型）、textarea。
代码示例：获取选中的文本内容

<textarea id="content" rows="3">选中这段文字试试</textarea>
<p id="selectedText"></p>

<script>
document.getElementById('content').addEventListener('select', (e) => {
  const start = e.target.selectionStart;
  const end = e.target.selectionEnd;
  const selected = e.target.value.substring(start, end);
  document.getElementById('selectedText').textContent = `选中：${selected}`;
});
</script>

注意事项：
- 仅针对文本选择行为，不包括点击选择单选/复选框
- 可通过selectionStart和selectionEnd获取选择范围

二、焦点事件

4. `focus` 事件

功能：当表单元素获得焦点（用户点击或通过Tab键导航进入）时触发。
适用元素：所有可交互的表单元素。
代码示例：显示输入提示

<input type="email" id="email" placeholder="邮箱地址">
<div id="emailHelp" style="display: none; color: #666;">
请输入有效的邮箱地址（例如：user@example.com）
</div>

<script>
const email = document.getElementById('email');
const help = document.getElementById('emailHelp');

email.addEventListener('focus', () => {
  help.style.display = 'block';
});
</script>

注意事项：
- 可通过element.focus()方法手动触发
- 不冒泡，如需委托需使用focusin事件

5. `blur` 事件

功能：当表单元素失去焦点（用户点击其他区域或通过Tab键离开）时触发。
适用元素：所有可交互的表单元素。
代码示例：验证输入内容

<input type="password" id="password" placeholder="设置密码">
<span id="passwordError" style="color: red;"></span>

<script>
document.getElementById('password').addEventListener('blur', (e) => {
  const errorEl = document.getElementById('passwordError');
  if (e.target.value.length < 8) {
    errorEl.textContent = '密码长度不能少于8位';
  } else {
    errorEl.textContent = '';
  }
});
</script>

注意事项：
- 不冒泡，如需事件委托使用focusout事件
- 常用于表单验证（失去焦点时检查输入合法性）

6. `focusin` 与 `focusout` 事件

功能：分别对应focus和blur的冒泡版本，事件会向上传播。
适用场景：需要通过父元素统一监听多个子表单元素的焦点状态。
代码示例：统一处理表单内所有元素的焦点状态

<form id="userForm">
<input type="text" name="username" placeholder="用户名">
<input type="email" name="email" placeholder="邮箱">
</form>

<script>
const form = document.getElementById('userForm');

// 焦点进入时添加高亮样式
form.addEventListener('focusin', (e) => {
  e.target.classList.add('focused');
});

// 焦点离开时移除高亮样式
form.addEventListener('focusout', (e) => {
  e.target.classList.remove('focused');
});
</script>

<style>
.focused {
  border: 2px solid #4d90fe;
  box-shadow: 0 0 5px rgba(77, 144, 254, 0.5);
}
</style>

注意事项：
- 行为与focus/blur一致，唯一区别是支持冒泡
- 适合表单级别的统一焦点管理

三、提交与重置事件

7. `submit` 事件

功能：当表单提交时触发（点击提交按钮或按Enter键）。
适用元素：form标签（而非提交按钮）。
代码示例：表单提交验证

<form id="loginForm">
<input type="text" name="username" required>
<button type="submit">登录</button>
</form>

<script>
document.getElementById('loginForm').addEventListener('submit', (e) => {
  // 阻止表单默认提交行为
  e.preventDefault();
  
  // 自定义验证逻辑
  const username = e.target.username.value;
  if (username.length < 3) {
    alert('用户名至少3个字符');
    return;
  }
  
  // 手动处理提交（如AJAX请求）
  submitFormData({ username });
});
</script>

注意事项：
- 必须在form元素上监听，而非提交按钮
- 需调用e.preventDefault()阻止默认刷新行为
- 支持HTML5表单验证（带required等属性时自动触发）

8. `reset` 事件

功能：当表单被重置（点击重置按钮或调用form.reset()）时触发。
适用元素：form标签。
代码示例：重置前确认

<form id="settingsForm">
<input type="checkbox" name="notifications" checked>
<button type="reset">恢复默认</button>
</form>

<script>
document.getElementById('settingsForm').addEventListener('reset', (e) => {
  if (!confirm('确定要恢复默认设置吗？')) {
    e.preventDefault(); // 取消重置
  }
});
</script>

注意事项：
- 触发时机是在表单被重置前，可通过preventDefault()取消
- 重置会将表单元素恢复到初始值（页面加载时的value）

四、验证事件

9. `invalid` 事件

功能：当表单元素验证失败时触发（如提交时required字段为空）。
适用元素：所有支持HTML5验证的表单元素（带required、pattern等属性）。
代码示例：自定义验证提示

<input type="email" id="userEmail" required>
<button type="button" onclick="validateEmail()">验证</button>

<script>
const email = document.getElementById('userEmail');

email.addEventListener('invalid', (e) => {
  // 阻止浏览器默认提示
  e.preventDefault();
  // 自定义错误信息
  if (e.target.value === '') {
    e.target.setCustomValidity('邮箱不能为空');
  } else {
    e.target.setCustomValidity('请输入有效的邮箱地址');
  }
  // 显示错误提示
  showError(e.target, e.target.validationMessage);
});

function validateEmail() {
  // 手动触发验证
  if (!email.checkValidity()) {
    email.reportValidity(); // 触发invalid事件
  }
}
</script>

注意事项：
- 需配合checkValidity()或表单提交触发
- 使用setCustomValidity()设置自定义错误信息
- 阻止默认行为后需手动显示错误提示

10. `valid` 事件

功能：当表单元素从无效状态变为有效状态时触发。
适用元素：所有支持HTML5验证的表单元素。
代码示例：实时反馈验证状态

<input type="tel" id="phone" pattern="1[3-9]\d{9}" placeholder="手机号">
<span id="phoneStatus"></span>

<script>
const phone = document.getElementById('phone');
const status = document.getElementById('phoneStatus');

phone.addEventListener('input', () => {
  // 输入变化时检查有效性
  phone.checkValidity();
});

phone.addEventListener('valid', () => {
  status.textContent = '手机号格式正确';
  status.style.color = 'green';
});

phone.addEventListener('invalid', (e) => {
  e.preventDefault(); // 仅阻止默认提示，不阻止事件
  status.textContent = '请输入11位有效手机号';
  status.style.color = 'red';
});
</script>

注意事项：
- 需通过checkValidity()手动触发检查
- 与invalid事件配合，实现完整的验证反馈流程

五、特殊元素事件

11. `change` 事件（复选框/单选按钮）

功能：当复选框状态切换或单选按钮选中项变化时触发。
代码示例：处理同意条款复选框

<input type="checkbox" id="agreeTerms"> 我同意服务条款
<button id="submitBtn" disabled>提交</button>

<script>
const agreeBox = document.getElementById('agreeTerms');
const submitBtn = document.getElementById('submitBtn');

agreeBox.addEventListener('change', (e) => {
  // 根据复选框状态启用/禁用按钮
  submitBtn.disabled = !e.target.checked;
});
</script>

12. `input` 事件（文件上传）

功能：当用户选择文件后触发（input[type="file"]专属）。
代码示例：预览选中的图片

<input type="file" id="avatar" accept="image/*">
<img id="preview" style="max-width: 200px; margin-top: 10px;">

<script>
document.getElementById('avatar').addEventListener('input', (e) => {
  const file = e.target.files[0];
  if (file) {
    // 预览图片
    const reader = new FileReader();
    reader.onload = (event) => {
      document.getElementById('preview').src = event.target.result;
    };
    reader.readAsDataURL(file);
  }
});
</script>