search事件适合捕获清除动作，因原生×点击后立即触发且value为空，而input事件噪音大需防抖；但仅Chrome/Edge/Safari（15.4+）支持，Firefox不支持，需用input+值变化检测兜底。
直接监听 search 事件，但必须知道它只在 Chrome/Edge/Safari（15.4+）中可靠触发，Firefox 不支持 —— 别指望它跨浏览器统一工作。
为什么 search 事件比 input 更适合捕获“清除”动作
原生 × 按钮点击后，浏览器会清空 value 并立即触发 search 事件（仅限支持该事件的浏览器），此时 e.target.value 已是空字符串，无需再读取或判断；而 input 事件在每次键入、粘贴、删除时都触发，噪音大，需额外做空值判断和防抖。
-
search在用户明确表达“结束搜索意图”时才触发：点 ×、按 Enter、按 Esc - 它不触发于普通输入过程，逻辑更干净，适合重置筛选、清空缓存、发空查询等场景
- 注意：Firefox 110+ 虽显示 × 按钮，但依然不派发
search事件，必须 fallback
监听不到 search？检查这三点
常见“绑了事件却没反应”，往往不是代码写错，而是环境或行为被干扰：
- 没用
type="search"—— 改成<input type="search">，type="text"根本不会触发search - 加了
event.preventDefault()在click或input回调里 —— 原生 × 的清空逻辑会被阻断，按钮卡住不消失 - 在 React/Vue 等框架中用了受控组件（
value={state}），但没同步更新 state —— 清除后 DOM 值为空，state 还是旧值，界面不一致
Firefox 兼容方案：用 input + 值变化检测兜底
不能只靠 search，尤其当目标用户含 Firefox 用户时。稳妥做法是监听 input，并在回调里对比前后值：
立即学习“前端免费学习笔记（深入）”；
- 缓存上一次
value（例如用闭包变量或data-last-value属性） - 当前
value为空且上次非空 → 视为“被清除” - 配合
focusout补漏（用户聚焦后直接点页面其他地方，可能跳过input） - 避免用
change—— 它只在失焦后触发，无法响应即时清除
示例关键逻辑：
let lastValue = '';<br>input.addEventListener('input', () => {<br> if (input.value === '' && lastValue !== '') {<br> console.log('检测到清除');<br> // 执行重置逻辑<br> }<br> lastValue = input.value;<br>});
别试图操作那个 × 按钮的 DOM 节点
原生清除按钮不是真实 HTML 元素，它由浏览器 UA 样式渲染，不在常规 DOM 树中暴露，也无法通过 querySelector 获取。所有“给 × 绑 click”的尝试都会失败。
- 不要写
document.querySelector('::-webkit-search-cancel-button')—— 语法非法，选不到 - 不要在
search回调里手动赋input.value = ''—— 浏览器已经做了，重复赋值无害但多余 - 如需自定义按钮（比如统一图标、无障碍支持），应放弃原生 ×，改用 JS 模拟：外层
<div role="search">包裹<input>和<button type="button">，用 CSS Flex 布局定位
真正难的不是监听，而是接受“原生 × 不可编程”这个事实 —— 它只负责清空，其余一切得你用事件和状态自己串起来。
