能否从form元素的onsubmit处理器获取event参数？为何参数为undefined？

你遇到的问题是因为在onsubmit属性里调用函数时，没有传递事件对象参数，导致函数里的x始终是undefined。下面是两种正确的解决方式：

方法1：在inline事件中直接传递event变量 #

修改HTML的onsubmit属性，显式把event作为参数传给函数：

<form method="post" id="fm1" onsubmit="usernamePasswordLogin(event);">
  <button>SUBMIT</button>
</form>

对应的JS无需改动，此时函数就能拿到事件对象，你可以正常调用preventDefault()阻止表单默认提交行为：

function usernamePasswordLogin(x) {
    x.preventDefault(); // 阻止表单默认提交
    console.log('x', x); // 现在能打印出事件对象
}

方法2：使用addEventListener绑定事件（推荐） #

更现代的写法是避免inline事件处理器，通过JS代码绑定事件监听，此时回调函数会自动接收事件参数：

<form method="post" id="fm1">
  <button>SUBMIT</button>
</form>

document.getElementById('fm1').addEventListener('submit', function(event) {
    event.preventDefault();
    console.log('event', event);
    // 这里可以调用你的usernamePasswordLogin函数，把event传进去
    usernamePasswordLogin(event);
});

function usernamePasswordLogin(x) {
    console.log('x', x);
}

这种写法将HTML结构和JS逻辑分离，更易于维护和调试。

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