本文详解在启用 `type="module"` 的 html 环境下，如何安全、可靠地通过 `onblur` 事件获取 `` 元素的值，并解决因模块作用域、执行时机及事件绑定方式不当导致的 `undefined` 或 `cannot access 'document'` 等常见错误。
在现代前端开发中，使用 type="module" 加载 JavaScript 是推荐实践，但它带来两个关键约束：模块默认处于严格模式且具有顶层作用域隔离，同时 模块脚本默认延迟执行（deferred） —— 即 DOM 尚未完全解析完成时，模块代码可能已开始运行（尤其当 <script type="module"> 写在 <head> 中）。这正是你遇到问题的根本原因：
- ❌ 错误写法：在 main.js 中直接调用 getFranchiseFee()（无参数），而该函数内部又试图访问 document.getElementById(...)；
- ❌ 更严重的是：onblur="getFranchiseFee()" 是内联事件处理器，它运行在全局作用域，但你的 getFranchiseFee 函数仅在模块内声明并导出，全局不可见，因此浏览器会报 ReferenceError: getFranchiseFee is not defined；
- ✅ 正确思路：避免内联事件处理，改用模块内 addEventListener 绑定；确保 DOM 就绪后再操作元素；函数设计应接收事件对象或元素引用，而非重复查询 DOM。
✅ 推荐解决方案（模块化 + 事件委托）
1. 修改 HTML：移除内联 onblur，保留语义化结构
<td class="value">
<input
type="text"
class="form__field"
placeholder="R$"
name="franchise-fee"
id="franchiseFee"
required />
</td>⚠️ 注意：type="input" 是无效属性，应改为 type="text"（或 type="number" 更合适）。
2. 更新 GetElement.mjs（优化函数职责）
// GetElement.mjs
export function getFranchiseFee(inputElement) {
if (!inputElement || !(inputElement instanceof HTMLInputElement)) {
console.warn('Invalid input element passed to getFranchiseFee');
return NaN;
}
const value = inputElement.value.trim();
return value ? parseFloat(value) : 0;
}✅ 优势：函数只负责“解析值”，不耦合 DOM 查询逻辑，可复用、易测试。
3. 在 main.js 中安全绑定事件
// main.js
import { getFranchiseFee } from './GetElement.mjs';
// 确保 DOM 加载完成后再执行
document.addEventListener('DOMContentLoaded', () => {
const input = document.getElementById('franchiseFee');
if (!input) {
console.error('Input element with id "franchiseFee" not found');
return;
}
input.addEventListener('blur', (e) => {
const value = getFranchiseFee(e.target);
console.log('Franchise Fee (parsed):', value); // ✅ 正确输出数值
// 后续可触发计算、校验、更新 UI 等逻辑
});
});? 关键注意事项总结
- 永远不要依赖内联事件处理器（如 onblur="..."）配合 ES 模块：模块内定义的函数无法被全局 HTML 属性访问；
- 始终检查 DOM 就绪状态：使用 DOMContentLoaded 或将 <script> 放在 </body> 前（但模块仍需 defer 行为）；
- 函数应专注单一职责：getFranchiseFee() 接收已存在的 DOM 元素，而非自行 getElementById，提升可维护性与单元测试友好性；
- 添加输入校验：空值、非数字字符串应有合理 fallback（如返回 0 或 NaN），避免 parseFloat('') === 0 的隐式陷阱；
- 调试技巧：在事件回调中 console.log(e.target.value) 可快速验证原始输入是否捕获成功。
按此方案重构后，你将获得稳定、可扩展、符合现代 Web 标准的输入值获取机制。
