HTML中DOM加载完成后初始化JavaScript类供后续调用的最佳实践

• 行内onChange事件执行时默认在全局作用域查找obj变量，而你在DOMContentLoaded回调中创建的obj如果未显式挂载到全局，或者用了let/const声明，仅属于回调内部的作用域变量，全局无法访问，自然会抛出引用错误。
• 即使你未加声明关键字让obj隐式挂载到全局，也存在极端场景下DOM还未完成加载、obj还未初始化就触发了change事件的隐患，同时行内绑定事件的写法耦合了DOM结构和交互逻辑，不符合开发规范。

方案1：取消行内事件绑定，逻辑统一在JS中处理（最推荐） #

完全删除select标签的onChange属性，所有交互逻辑放在DOM加载完成的回调中统一处理，不需要暴露全局变量，彻底规避作用域问题：

改造后的JS代码（head标签内） #

window.addEventListener('DOMContentLoaded', (event) => {
  // 替换为你自己实现的select相关类
  const selectInstance = new YourCustomClass();
  // 获取对应select DOM元素
  const selectEl = document.getElementById('select');
  // 绑定change事件
  selectEl.addEventListener('change', () => {
    // 替换为你实际要调用的类方法
    selectInstance.yourMethod(selectEl);
  });
});

改造后的select代码（body标签内） #

<select name="select" id="select">
    <option value="value1">Value1</option>
    <option value="value2">Value2</option>
</select>

额外优化建议 #

如果你的script标签可以放到body标签的末尾，不需要监听DOMContentLoaded事件，此时DOM已经解析完成，直接初始化类、绑定事件即可，逻辑更简洁。

方案2：显式挂载实例到全局（仅兼容旧代码用，不推荐） #

如果你必须保留现有的行内onChange写法，可以将实例显式挂载到window对象上，保证全局作用域可以访问到：

window.addEventListener('DOMContentLoaded', (event) => {
  // 显式挂载到全局window对象
  window.obj = new YourCustomClass();
});

该方案会污染全局命名空间，多实例场景容易出现命名冲突，仅作为临时兼容方案使用。

内容的提问来源于stack exchange，提问作者eaguila