在内联 `onsubmit` 事件处理器中调用 javascript 函数时，若需访问原生 `event` 对象（如调用 `preventdefault()`），必须显式将 `event` 作为参数传入函数，否则形参将为 `undefined`。

HTML 表单的 onsubmit 属性支持内联 JavaScript 执行，但它不会自动将事件对象注入到被调用函数的作用域中。这意味着以下写法是错误的：

SUBMIT

function usernamePasswordLogin(x) {
  console.log('x', x); // 输出: x undefined
}

尽管浏览器全局存在 event 对象（在部分旧版浏览器中），但该行为已被废弃且不可靠，现代开发中应避免依赖。

✅ 正确做法是：在 onsubmit 属性中显式传入 event（这是浏览器提供的只读变量，代表当前触发的 SubmitEvent）：

SUBMIT

对应 JS 函数可正常接收并使用事件对象：

JavaScript 测试模式

使用 Jest、Vitest 和 Testing Library 实施全面的测试策略，包括单元测试、集成测试和端到端测试，涵盖模拟、测试夹具和测试驱动开发。在编

下载

function usernamePasswordLogin(e) {
  e.preventDefault(); // 阻止表单默认提交行为
  console.log('e', e); // e 是完整的 SubmitEvent 实例
  console.log('e.target', e.target); // 指向 

元素 }

⚠️ 注意事项：

• 始终为 设置 type="submit"（显式声明），避免在某些浏览器中被默认视为 type="submit" 的歧义行为；
• 内联事件处理虽简单，但不利于维护和测试；推荐优先使用 addEventListener：

document.getElementById('fm1').addEventListener('submit', function(e) {
  e.preventDefault();
  console.log('Form submitted!', e);
});

这种方式更清晰、可复用性强，且天然支持 this 指向表单元素、便于解耦逻辑与结构。

总结：onsubmit="handler(event)" 是内联方式下获取事件对象的唯一标准写法；但生产环境建议迁移到 addEventListener，以获得更好的可维护性、类型安全（配合 TypeScript）及调试体验。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！