给表单绑定提交事件时，很多人习惯直接在 HTML 上写 onsubmit 属性，比如 onsubmit="return checkForm()"。这种写法简单直观，但一旦想在处理函数里拿到事件对象，问题就来了：有人直接写 event.preventDefault() 结果报错，有人在 Firefox 里调试正常到了别处又失效。要彻底解决这个问题，需要先理解内联事件的执行机制。
内联事件本质上是一段被包装的函数体
浏览器解析到 onsubmit="..." 这样的属性时，并不会把属性值当成普通的字符串代码随意执行，而是把它包装成一个函数，大致等价于下面的形式：
function(event) {
with(document) {
with(this.form) {
with(this) {
// 你写在 onsubmit 里的代码
}
}
}
}从这个等价结构可以看出两点。第一，包装函数有一个名为 event 的形参，所以你在内联代码里写的 event，指的是这个形参，而不是全局对象。这就是为什么在内联事件中可以直接使用 event，而在外部定义的普通函数里直接使用 event 在部分浏览器中会报错。
第二，with 语句的作用域链解释了为什么内联代码里可以直接写表单元素的 name 而不用 document.querySelector。这段包装逻辑是 HTML 规范定义的行为，主流浏览器都遵循，但旧版 IE（IE8 及更早）的实现有偏差，它把 event 挂在全局对象 window 上，并且不通过形参传入，这也是早期代码兼容性问题的根源。现代浏览器已经统一了行为，可以放心使用 event 参数。
在内联事件中正确获取并传递事件对象
最规范的写法是显式把 event 传给你自己的处理函数。示例如下：
<form onsubmit="return checkForm(event)">
<input type="text" name="username">
<button type="submit">提交</button>
</form>
<script>
function checkForm(e) {
e.preventDefault(); // 阻止表单默认提交
var input = e.target.querySelector('input[name=username]');
if (!input.value.trim()) {
alert('用户名不能为空');
return false;
}
// 校验通过后手动提交
e.target.submit();
return true;
}
</script>这里有几个细节要注意。event 这个标识符必须原样传入，它是包装函数的形参名，不能改写成别的名字，否则在部分浏览器中会去全局作用域找 window.event，严格模式下会直接抛出未定义错误。
另一个容易踩的坑是 return 的位置。onsubmit 内联事件的返回值决定了表单是否继续提交：返回 false 或者字符串 false 都会阻止提交。如果你写的是 onsubmit="checkForm(event)"，即使函数内部返回了 false，表单照样会提交，因为内联代码本身没有 return 语句。正确的写法必须带上 return 关键字：onsubmit="return checkForm(event)"。
如果想同时阻止默认行为，也可以在内联代码里直接调用 event.preventDefault()，例如 onsubmit="event.preventDefault(); doSomething()"。这种方式在支持标准的浏览器中都可以工作，但建议统一在外层处理函数中调用，逻辑更集中，也方便维护。
为什么推荐改用 addEventListener 绑定
内联事件虽然方便，但存在明显局限：一个元素只能绑定一个同类型事件处理函数，后写的会覆盖先写的；代码混杂在 HTML 中不利于维护；也无法利用事件捕获阶段的特性。更现代的做法是把 JavaScript 与 HTML 彻底分离：
document.querySelector('form').addEventListener('submit', function(e) {
e.preventDefault();
if (!this.querySelector('input[name=username]').value.trim()) {
alert('用户名不能为空');
return;
}
this.submit();
});addEventListener 的事件处理函数会自动接收事件对象作为第一个参数，不需要任何额外传递，也完全不存在兼容性差异。同时它还支持 passive、once 等配置项，处理复杂交互时更加灵活。
还有一个隐蔽的坑值得提醒：在处理函数中调用 form.submit() 手动提交时，不会再次触发 submit 事件，所以不会出现死循环。但如果你的提交逻辑依赖事件对象中的 FormData（比如 new FormData(e.target)），要注意此时表单数据仍然可以正常获取，因为 e.target 指向的就是表单元素本身。
常见错误写法汇总
下面列举几种典型错误，方便对照排查：
- 遗漏 return：写成 onsubmit="checkForm()"，即使函数返回 false 也无法阻止提交，必须写 onsubmit="return checkForm()"。
- 误用 window.event：在外部定义的函数中直接使用 event 变量，在 Chrome 中恰好能取到 window.event，但在 Firefox 的严格模式下会直接报错，这是跨浏览器兼容的重大隐患。
- 箭头函数中的 this：如果在内联事件相关的回调中使用箭头函数，this 不会指向表单元素，而是继承外层作用域，需要通过事件对象的 target 或 currentTarget 获取元素。
- button 未指定 type：form 内的 button 默认 type 是 submit，如果有多个 button 且不希望都触发提交，记得显式设置 type="button"。
总结一下，内联 onsubmit 中可以直接使用 event，是因为浏览器把属性值包装成了带 event 形参的函数。最稳妥的用法是 onsubmit="return handler(event)"，把事件对象显式传给处理函数，并在函数内调用 preventDefault 或返回 false 来控制提交行为。新项目则建议统一使用 addEventListener，从根源上避免这一类问题。