事件委托通过父元素监听子元素事件，提升表单性能；应选用稳定语义化的父容器（如form#myForm），确保目标控件为其后代，利用event.target.matches()精准识别，并统一处理逻辑、按需分流，注意控制默认行为与冒泡。
事件委托是用父元素监听子元素的事件，避免给每个输入框单独绑定事件。对复杂表单特别实用——无论新增、删除多少输入框，只要结构在委托容器内，监听就自动生效。
选对委托容器是关键
不要把事件监听挂在 document 或 body 上，而应选一个稳定、语义明确的父容器，比如表单本身或带特定 class 的包裹层：
- 推荐用
<form id="myForm">作为委托目标，语义清晰且生命周期可控 - 避免用动态生成/频繁增删的中间节点（如某段临时插入的
<div>），否则可能中断委托链 - 确保所有目标输入框（
input、select、textarea）都是该容器的**后代节点**，而非通过portal或shadow DOM移出
精准识别触发的输入框
点击或输入时，事件对象的 event.target 是实际被操作的元素。需结合 matches() 做类型和状态过滤：
- 用
event.target.matches('input, select, textarea')判断是否为表单控件 - 可进一步加条件，如
event.target.matches('input[type="text"][name]')只响应有 name 的文本框 - 注意：
change和input触发时机不同——实时校验用input，提交前校验用change
统一处理逻辑 + 按需分流
在委托回调里，先提取通用信息（name、value、type），再根据字段特征执行不同逻辑：
Java Maven Common
下载
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
立即学习“Java免费学习笔记（深入）”；
- 用
const { name, value, type } = event.target快速解构基础属性 - 用
event.target.dataset.rule或event.target.getAttribute('data-validate')携带校验规则，实现配置驱动 - 对特殊字段（如密码确认、日期联动）用
switch(name)或查表方式跳转专用函数，不堆 if-else
注意事件冒泡与默认行为
某些输入行为（如回车提交表单）会触发默认动作，需按需干预：
- 仅监听输入不希望提交？在回调开头加
if (event.type === 'keydown' && event.key === 'Enter') event.preventDefault() - 若委托了
submit事件，务必在表单 submit 处理器中调用event.preventDefault()阻止页面刷新 - 避免在委托回调里频繁调用
event.stopPropagation()——它会破坏其他依赖冒泡的逻辑（如外层模态框关闭）
不复杂但容易忽略：委托后记得清理？不需要。只要容器没被销毁，委托就一直有效；若整个表单被移除，监听自然失效，无需手动 removeEventListener。
