
在 html 内联事件处理中(如 `onsubmit="..."`),若需访问原生事件对象,必须显式传入 `event` 参数,否则函数接收的参数值为 `undefined`。
在表单提交场景中,常需调用 event.preventDefault() 阻止默认跳转或刷新行为,并执行自定义逻辑(如表单验证、AJAX 提交等)。但若采用内联方式绑定事件处理器,JavaScript 函数不会自动接收事件对象——这与通过 addEventListener 绑定时的行为不同。
例如,以下写法是错误的:
<form method="post" id="fm1" onsubmit="usernamePasswordLogin();"> <button type="submit">SUBMIT</button> </form>
function usernamePasswordLogin(x) {
console.log('x', x); // 输出:x undefined
}原因在于:onsubmit="usernamePasswordLogin();" 中未向函数传递任何参数,因此形参 x 始终为 undefined。
✅ 正确做法是显式传入全局 event 对象(浏览器环境中,内联事件处理器可直接访问该只读变量):
<form method="post" id="fm1" onsubmit="usernamePasswordLogin(event);"> <button type="submit">SUBMIT</button> </form>
function usernamePasswordLogin(e) {
e.preventDefault(); // 现在可以安全调用
console.log('event type:', e.type); // "submit"
console.log('target form:', e.target); // <form id="fm1">
// 后续业务逻辑,如收集表单数据、发起 fetch 请求等
}⚠️ 注意事项:
- event 是浏览器提供的全局变量,仅在内联事件处理器(如 onclick, onsubmit)中可用,不可在普通函数调用中直接使用;
- 推荐优先使用现代标准的事件绑定方式(更清晰、可维护性高):
document.getElementById('fm1').addEventListener('submit', function(e) {
e.preventDefault();
// ✅ 事件对象自动传入,无需手动指定
});- 若表单含多个提交按钮或需兼容复杂交互,建议结合 e.submitter 属性识别触发源(现代浏览器支持)。
总结:内联 onsubmit 中获取事件对象的关键是 onsubmit="handler(event)" —— 显式传递 event,而非依赖自动注入。但出于代码解耦与可测试性考虑,生产环境应优先选用 addEventListener 方式。










