如何在内联 onsubmit 事件处理器中正确获取原生 event 对象？

在 html 内联事件处理中（如 `onsubmit="..."`），若需访问原生事件对象，必须显式传入 `event` 参数，否则函数接收的参

数值为 `undefined`。

在表单提交场景中，常需调用 event.preventDefault() 阻止默认跳转或刷新行为，并执行自定义逻辑（如表单验证、AJAX 提交等）。但若采用内联方式绑定事件处理器，JavaScript 函数不会自动接收事件对象——这与通过 addEventListener 绑定时的行为不同。

例如，以下写法是错误的：

  SUBMIT

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

原因在于：onsubmit="usernamePasswordLogin();" 中未向函数传递任何参数，因此形参 x 始终为 undefined。

✅ 正确做法是显式传入全局 event 对象（浏览器环境中，内联事件处理器可直接访问该只读变量）：

  SUBMIT

function usernamePasswordLogin(e) {
  e.preventDefault(); // 现在可以安全调用
  console.log('event type:', e.type); // "submit"
  console.log('target form:', e.target); // 

  // 后续业务逻辑，如收集表单数据、发起 fetch 请求等
}

⚠️ 注意事项：

• event 是浏览器提供的全局变量，仅在内联事件处理器（如 onclick, onsubmit）中可用，不可在普通函数调用中直接使用；
• 推荐优先使用现代标准的事件绑定方式（更清晰、可维护性高）：

document.getElementById('fm1').addEventListener('submit', function(e) {
  e.preventDefault();
  // ✅ 事件对象自动传入，无需手动指定
});

• 若表单含多个提交按钮或需兼容复杂交互，建议结合 e.submitter 属性识别触发源（现代浏览器支持）。

总结：内联 onsubmit 中获取事件对象的关键是 onsubmit="handler(event)" —— 显式传递 event，而非依赖自动注入。但出于代码解耦与可测试性考虑，生产环境应优先选用 addEventListener 方式。