应使用事件委托优化表单控件事件绑定：选稳定就近父容器（如form、table）、用target.matches()/closest()精准识别目标、统一处理touchstart与click防延迟和重复，并在vue中通过ref绑定容器事件。
直接给上千个表单控件（比如 checkbox、radio、input[type=button]）逐个绑定事件，不仅初始化慢、内存占用高，还容易因动态增删节点而漏绑或重复绑。用事件委托，只需在父容器上监听一次，所有交互自动生效——关键是选对容器、写对判断逻辑、兼顾兼容性。
选一个稳定、就近的父容器
别用 document 或 body 做委托根节点。冒泡路径太长，e.target.closest() 查找变慢，尤其在低端设备上反而拖累响应。优先选择语义明确、结构稳定的父级，比如：
-
<form id="order-form"></form>—— 表单本身就是天然容器 <div class="form-section"> —— 按功能区块划分的 wrapper <li><code><table class="item-list"> —— 表格类表单中，table 或 tbody 都比 div 更精准 <p>确保这个容器不会被 <code>innerHTML = '...'、replaceChildren()或 Vue/React 的整块重渲染清空——否则监听器还在，但子节点树已重建，委托就失效了。用 target.matches() 精准识别操作目标
别靠
e.target.tagName === 'INPUT'这种粗粒度判断，容易误触 label、span 等包裹元素。统一用e.target.matches(selector)或e.target.closest(selector)：-
e.target.matches('[data-action="submit"]')—— 匹配带特定 data 属性的按钮 -
e.target.closest('.form-checkbox')—— 匹配任意嵌套层级内的 checkbox 容器 -
e.target.closest('input[name="quantity"]')—— 直接定位到数量输入框
这样既支持深层嵌套结构（如按钮放在
<div><button></button></div>），也避免手写 while 循环遍历 parentNode。统一处理 touch 和 click，防 300ms 延迟与重复触发
表单在移动端必须响应快。不能只绑
click（有 300ms 延迟），也不能双绑touchstart+click（可能触发两次）。正确做法是：- 优先监听
touchstart，并传{ passive: false }，以便调用e.preventDefault()阻止缩放 - 在回调里统一用
e.target.closest()判断目标，执行业务逻辑 - 再额外监听
click，加一个简单节流：设置标志位 +setTimeout清除，避免 touch 后紧跟 click 导致重复
示例中不依赖框架，纯原生即可落地。
Vue 场景下用 v-on + ref 替代 .native
在 Vue 中，不要在每个
v-for生成的按钮上写@click。把事件绑定到容器上：- 模板：
<form ref="formEl"></form> - 脚本：
mounted() { this.$refs.formEl.addEventListener('click', this.handleFormClick); }，并在beforeUnmount移除监听 - 处理函数内用
event.target.matches('[type="submit"]')或event.target.dataset.action分路
避开
@click.native（Vue 3 已废弃），也不要在子组件根标签上强行透传原生事件——让父组件控制委托位置，更可控、更易测。-
