如何在使用 ES 模块时正确通过 onblur 事件获取输入框的值

本文详解在启用 `type=”module”` 的 html 环境下，如何安全、可靠地通过 `onblur` 事件获取 `` 元素的值，并解决因模块作用域、执行时机及事件绑定方式不当导致的 `undefined` 或 `cannot access ‘document’` 等常见错误。

在现代前端开发中，使用 type=”module” 加载 javaScript 是推荐实践，但它带来两个关键约束：模块默认处于严格模式且具有顶层作用域隔离，同时 模块脚本默认延迟执行（deferred） —— 即 dom 尚未完全解析完成时，模块代码可能已开始运行（尤其当

• ❌ 错误写法：在 main.js 中直接调用 getFranchiseFee()（无参数），而该函数内部又试图访问 document.getElementById(…)；
• ❌ 更严重的是：onblur=”getFranchiseFee()” 是内联事件处理器，它运行在全局作用域，但你的 getFranchiseFee 函数仅在模块内声明并导出，全局不可见，因此浏览器会报 ReferenceError: getFranchiseFee is not defined；
• ✅ 正确思路：避免内联事件处理，改用模块内 addEventListener 绑定；确保 DOM 就绪后再操作元素；函数设计应接收事件对象或元素引用，而非重复查询 DOM。

✅ 推荐解决方案（模块化 + 事件委托）

1. 修改 html：移除内联 onblur，保留语义化结构

⚠️ 注意：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 或将