HTML表单onSubmit调用类实例方法报错，如何通过JS绑定实现？

我有如下JS文件：

class UniversityListModals {
  test(){
    alert("ed")
  }
}

const universityListModals = new UniversityListModals();
universityListModals.test();

这段代码可正常弹出alert窗口。但在HTML表单标签中尝试调用该方法：

<form method="GET" action="/something/" class="" onSubmit="universityListModals.test()">

点击提交按钮时控制台提示："Uncaught ReferenceError: universityListModals is not defined"。请问如何通过JS而非直接在HTML中调用该方法？

要通过纯JS绑定表单提交事件，同时解决变量作用域问题，推荐以下两种方法：

方法1：使用事件监听器绑定提交事件（推荐） #

这种方法分离HTML与JS代码，避免作用域冲突，也更易维护：

// 等待DOM完全加载后执行，确保能找到表单元素
document.addEventListener('DOMContentLoaded', () => {
  class UniversityListModals {
    test(){
      alert("ed");
    }
  }

  const universityListModals = new UniversityListModals();
  
  // 通过选择器定位目标表单，可根据实际情况用ID、类名等选择器
  const targetForm = document.querySelector('form[action="/something/"]');
  
  if (targetForm) {
    targetForm.addEventListener('submit', (e) => {
      universityListModals.test();
      // 如果不需要表单默认跳转行为，取消默认动作
      // e.preventDefault();
    });
  }
});

核心逻辑：

• 用DOMContentLoaded确保DOM渲染完成后再操作元素，避免找不到表单的问题。
• 通过事件监听器绑定submit事件，直接在JS内部调用方法，不受全局作用域限制。

方法2：将变量挂载到全局作用域（不推荐，仅作备选） #

如果你的JS代码被包裹在局部作用域（比如IIFE、模块）里，universityListModals无法被全局访问，可临时挂载到window对象上（会污染全局环境，谨慎使用）：

class UniversityListModals {
  test(){
    alert("ed");
  }
}

// 把实例挂载到window全局对象
window.universityListModals = new UniversityListModals();

// 绑定提交事件
document.addEventListener('DOMContentLoaded', () => {
  const targetForm = document.querySelector('form[action="/something/"]');
  targetForm.addEventListener('submit', () => {
    window.universityListModals.test();
    // 按需阻止表单默认提交
    // e.preventDefault();
  });
});

关键说明 #

报错原因是内联onSubmit事件会在全局作用域查找变量，而你的universityListModals可能处于局部作用域（比如模块、函数内部），全局无法访问。使用事件监听器的方式，能在变量所在的作用域内直接调用方法，从根源解决作用域问题。

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