应监听 input 事件判断值变为空的瞬间，因原生 × 按钮非真实 DOM 节点，无法绑定 click；需用状态变量区分“首次变空”，并配合 focus、aria-label 等保障可访问性。

用 type="search" 实现清空行为监听，关键不是“监听按钮点击”——因为原生 × 按钮不在 DOM 中，无法被 querySelector 获取，也无法绑定事件。真正可靠的方式是监听 input 事件，捕获值变为空的瞬间。

为什么不能监听清除按钮的 click？

浏览器注入的 × 按钮由 UA 样式渲染，不暴露为真实 DOM 节点，也不触发可捕获的 click 事件。你写的 addEventListener('click', ...) 对它完全无效。

• 点击 × 后只自动设置 input.value = ''，并同步触发 input 和 change 事件
• 粘贴空内容、语音输入清空、JS 手动赋值为空等操作，也会触发同样事件——所以统一监听 input 才能覆盖所有清空路径
• 别依赖 search 事件：它只在用户按回车提交时触发（且仅部分浏览器支持），和清空无关

正确监听清空动作的写法

在 input 事件中判断当前值是否为空字符串，并区分“首次变空”与“持续为空”：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

• 用一个变量记录上一次非空值，或直接对比 event.target.value === ''
• 推荐用 input 事件而非 change：后者在失去焦点时才触发，会延迟响应
• 示例代码：

<input type="search" id="q" placeholder="搜索">

const input = document.getElementById('q');
let wasNotEmpty = false;
input.addEventListener('input', () => {
  if (input.value) {
    wasNotEmpty = true;
  } else if (wasNotEmpty) {
    // 真正的清空动作发生：从有值→变空
    console.log('用户清空了搜索框');
    // 在这里调用你的清空后逻辑，比如重置结果列表、发请求清空缓存等
    wasNotEmpty = false;
  }
});

配套要点：确保清空行为可感知、可访问

仅监听还不够，要让清空后的交互闭环：

立即学习“前端免费学习笔记（深入）”；

• 清空后立刻 input.focus()，尤其移动端——否则软键盘不会自动弹起，用户得再点一次
• 给 input 加 name="q" 和 aria-label="站内搜索"，保证屏幕阅读器正确播报，且表单提交时参数不丢失
• 如果禁用了原生 ×（如用 appearance: none），必须提供替代方式：ESC 键监听 + 自定义按钮，否则键盘用户无法清空