HTML交互怎么国际化？事件驱动工程化规范-html教程-PHP中文网

html国际化核心在于动态文本必须经翻译函数处理，而非仅依赖data-i18n属性；所有js输出的文本、表单验证、第三方库配置、插值模板等均需实时调用翻译函数，并同步更新lang属性及重新绑定事件。

html交互怎么国际化？事件驱动工程化规范

HTML交互本身不“国际化”，真正要处理的是：事件触发后更新的文本、状态提示、表单验证消息、动态插入的 DOM 内容，是否随语言切换同步生效。只绑事件不改文案，等于没做国际化。

data-i18n 属性必须覆盖所有动态文本输出点

很多团队给按钮加了 data-i18n="btn_submit"，但点击后弹出的 toast 提示用 alert('Submitted!') 硬编码，或用 element.textContent = 'Success' 直接赋值——这些都会卡死在默认语言。

所有由 JS 动态写入的文本（textContent、innerText、placeholder、title、aria-label）必须走统一翻译函数，不能直写字符串
表单验证错误信息（如 input.reportValidity() 触发的浏览器原生提示）无法用 data-i18n 控制，需用 setCustomValidity() + 翻译函数重写
第三方库（如 Toast、Modal）的配置项（message、confirmText）也要从语言包取值，不能传死字符串
避免在事件回调里拼接中文/英文字符串，例如 `已删除 ${name}` → 应用插值模板：t('delete.success', { name })

事件监听器不能依赖 document.documentElement.lang

你写了 document.addEventListener('click', () => { if (document.documentElement.lang === 'zh-Hans') {...} })，这看似合理，但实际会失效：语言切换后 document.documentElement.lang 虽已更新，但旧监听器里的闭包仍捕获着切换前的值，且无法感知后续变更。

把语言状态抽成全局可读变量（如 window.__LANG 或 const currentLang = getActiveLang()），每次事件触发时实时读取
不要在事件回调里硬判断 lang === 'en'，而是调用翻译函数，让它内部查当前语言包
对高频事件（如 input、keydown），避免每次调用都 fetch 或深拷贝语言包，应预加载并缓存当前语言对象

动态插入 DOM 必须触发翻译，且绑定新事件

点击按钮后用 innerHTML 插入一段含 data-i18n 的 HTML，结果文字没变——不是翻译函数没跑，是它没扫描到新节点，更糟的是，里面按钮的 click 事件根本没绑。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

插入后立即调用翻译函数，且传入新节点作为作用域，例如 translateNode(newFragment)，而非全量遍历 document.body
新 DOM 中的交互元素（如 <button data-i18n="close"></button>）需重新绑定事件，不能复用旧监听器（因作用域可能已变）
若用事件委托（如 document.addEventListener('click', e => {...})），确保 selector 匹配新插入元素，且逻辑中调用的翻译函数是最新语言上下文
警惕 innerHTML += ... 这种写法：它会销毁原有节点及绑定事件，必须用 insertAdjacentHTML 或 appendChild 替代

lang 属性必须同步更新，否则字体和标点仍按旧语言渲染

用户切到日语，你更新了所有 data-i18n 文本，也调了 document.documentElement.lang = 'ja'，但页面里的顿号还是中文宽度、<pre class="brush:php;toolbar:false;" lang="bash"></pre> 里的等宽字体被日文字体覆盖——因为子元素的 lang 没动。

语言切换时，不仅要改根节点 lang，还要遍历所有含文本的语义化标签（<h1></h1>、<p></p>、<section></section>、<footer></footer>），批量设 el.lang = newLang
已有明确语言的特殊元素（如 <pre class="brush:php;toolbar:false;" lang="bash"></pre>、<code lang="sql">）必须跳过，保留其原始 lang 值，这是多语言混排的合法需求
不要给 <script></script> 或 <style></style> 加 lang，它们不参与文本渲染，设了无效
注意 BCP 47 格式：用 zh-Hans，不用 zh_CN 或 chinese，后者会导致浏览器忽略或 fallback 失败