事件委托实现多语言切换：将click监听器绑定在父容器，通过event.target.matches('button[data-lang]')精准识别按钮，读取data-lang值调用i18n切换并存入localStorage，支持动态渲染、防重复点击及默认行为拦截。
事件委托处理多语言切换按钮点击，核心是把监听器绑定在父容器（如 header 或 nav），而不是每个语言按钮单独绑定。这样既能应对动态增删按钮（比如切换后重新渲染），又能减少监听器数量，也方便统一处理语言变更逻辑。
监听父元素，用 event.target 匹配按钮
给语言切换区域（例如一个 class 为 lang-switcher 的 div）绑定一次 click 事件，然后判断点击的目标是否为某个语言按钮：
- 推荐用
data-lang属性标识语言代码，如<button data-lang="zh">中文</button> - 在事件回调中检查
event.target.dataset.lang是否存在且非空 - 避免误触发：用
event.target.matches('button[data-lang]')精准判断是否点中有效按钮
触发切换时更新页面语言并持久化
拿到目标语言代码后，执行实际的多语言切换流程：
- 调用 i18n 库方法（如
i18next.changeLanguage(lang)或自定义setLang(lang)） - 把选中语言存入
localStorage或cookie，保证刷新后仍生效 - 可选：更新按钮自身文案或添加 active 状态（如
btn.classList.add('active')）
支持动态按钮（如异步加载、组件重渲染）
如果语言按钮由框架（React/Vue）或模板引擎动态生成，传统直接绑定会失效。事件委托天然适配：
立即学习“Java免费学习笔记（深入）”；
- 监听器始终挂在稳定父节点上，不随子节点销毁重建而丢失
- 无需每次渲染后重新绑定，也不用在组件
useEffect或mounted中重复写监听逻辑 - 若按钮是 SVG 图标+文字组合，建议把
data-lang放在最外层按钮容器，而非内部span或svg
防止重复触发和默认行为干扰
按钮点击可能触发表单提交或页面跳转，需主动控制：
- 在事件回调开头加
event.preventDefault()，尤其当按钮是<a>或在<form>内时 - 添加防抖（debounce）或禁用按钮状态（
btn.disabled = true），避免用户快速连点导致多次请求 - 错误处理：若语言加载失败（如资源未就绪），给出提示并恢复按钮可用性
