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

碧海醫心 2026-01-06 00:00:00 次阅读

在 es 模块环境下，`onblur="getfranchisefee()"` 这种内联事件处理方式无法直接调用模块中导入的函数（因作用域隔离），需改用 `addeventlistener` 在模块内部绑定事件，并确保 dom 加载完成后再执行。

要实现在用户离开输入框（blur）时准确获取其值，并与 ES 模块（type="module"）协同工作，关键在于避免内联 JavaScript，转而采用模块化、解耦且符合现代 DOM 操作规范的方式。

✅ 正确做法：模块内监听 + DOM 就绪保障

首先，修正 HTML：移除内联 onblur 属性，仅保留语义化结构：




  
  
  Calculadora de receitas e despesas
  


  
    
      Franchise Fee

⚠️ 注意：是无效类型，应改为 type="text"（或 number）。

然后，重构 GetElement.mjs（建议重命名为语义更清晰的 inputUtils.mjs）：

// inputUtils.mjs
export function getFranchiseFee() {
  const input = document.getElementById('franchiseFee');
  if (!input) return NaN;
  return parseFloat(input.value) || 0;
}

// 可选：封装 blur 监听逻辑（推荐）
export function setupFranchiseFeeListener(callback) {
  const input = document.getElementById('franchiseFee');
  if (!input) {
    console.warn('Input #franchiseFee not found');
    return;
  }
  input.addEventListener('blur', () => {
    const value = getFranchiseFee();
    callback?.(value);
  });
}

最后，在 main.js 中导入并使用（务必等待 DOM 加载完成）：

// main.js
import { getFranchiseFee, setupFranchiseFeeListener } from './inputUtils.mjs';

// ✅ 推荐：在 DOMContentLoaded 后初始化，确保元素存在
document.addEventListener('DOMContentLoaded', () => {
  // 方式 1：手动触发获取（例如调试用）
  console.log('Initial value:', getFranchiseFee());

  // 方式 2：绑定 blur 事件并响应
  setupFranchiseFeeListener((value) => {
    console.log('Franchise Fee on blur:', value);
    // ✅ 此处可进行校验、计算、更新其他字段等业务逻辑
  });
});

? 常见错误与说明

❌ 内联事件（onblur="..."）在模块中不可用：模块脚本默认是严格模式，且全局作用域不共享 window 上的函数（除非显式挂载），因此 onblur="getFranchiseFee()" 会报 ReferenceError。
❌ 未等待 DOM 就绪就查询元素：若 main.js 在中加载且未加 DOMContentLoaded，document.getElementById() 可能返回 null。
❌ type="input" 是非法属性：浏览器会忽略或降级为 type="text"，但应显式声明正确类型。