点击原生×按钮时触发search事件，该事件专用于清除动作，仅在点击×或按esc键时触发，且此时value已为空字符串，chrome、edge、safari 15.4+、firefox 110+均支持。
点击原生 × 按钮时触发什么事件
type="search" 的原生清除按钮点击后，浏览器会自动清空 value，并同步触发 input 和 change 事件——但这两个事件在用户手动输入时也会频繁触发，无法区分“是输入还是清空”。真正专用于清除动作的事件是 search，它只在两种情况下触发：点击 × 按钮 或 按 Esc 键，且此时 this.value 已为空字符串。
-
search事件在 Chrome、Edge、Safari 15.4+、Firefox 110+ 中均支持（2026 年已全覆盖） - 不要监听
click到伪元素::-webkit-search-cancel-button上——它不可绑定事件，纯样式层 - 若同时监听
input和search，注意避免重复执行逻辑（比如两次清空或两次发请求）
如何正确绑定 search 事件
直接对 <input type="search"> 元素添加 search 监听即可，无需额外判断值是否为空，因为该事件触发即代表清除已完成：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
const searchInput = document.getElementById('searchInput');
searchInput.addEventListener('search', function(e) {
// 此时 this.value === ''
console.log('用户点击了清除按钮或按了 Esc');
// 可在此处重置搜索状态、清空结果列表、调用 API 清除缓存等
});
- 必须使用
addEventListener，内联onsearch在部分 Safari 版本中不生效 - 如果页面有多个
type="search"输入框，需分别绑定，不能靠事件委托捕获——search不冒泡 - 该事件不会在用户粘贴内容后触发，也不会在
value被 JS 赋值为空时触发，行为边界清晰
为什么不用 input/change 事件做清除判断
靠监听 input 并检查 value.length === 0 来识别清除动作，看似简单，实则容易误判：
- 用户输入后全选 + Delete，会触发多次
input，最后一次才是空值，但你无法确认这是清除还是误删 - 输入空格再删除，
value可能变成" "→""，中间态干扰判断 - JS 主动设
input.value = ""也会触发input，但并非用户清除意图 - 移动端软键盘回车、切换输入法等操作也可能导致
value瞬间为空
兼容旧版 Firefox（110 之前）怎么办
Firefox 110 之前完全不支持 search 事件，也不渲染原生 × 按钮。如果你仍需支持该版本（目前已极少见），只能退回到手动方案：
- 改用
type="text"，自行插入<button type="button"></button>并控制显隐 - 监听
input事件控制按钮显示：clearBtn.style.display = input.value ? 'inline-block' : 'none' - 按钮点击后执行
input.value = ''，再手动触发一次自定义事件（如dispatchEvent(new Event('cleared'))）供业务逻辑响应 - 注意：不要用
type="submit"或遗漏type="button"，否则表单会意外提交
search 事件就是最轻量、最准确的选择——它不依赖样式 hack，不污染 DOM 结构，也不需要轮询或定时器。唯一容易被忽略的是：它不冒泡，也不能用事件委托，每个搜索框都得单独监听。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
