JavaScript如何在单个onsubmit提交事件上绑定多个不同函数

直接对DOM元素的onsubmit事件处理属性重复赋值时，后赋值的函数会覆盖之前的绑定，因此只有最后绑定的exercise函数会执行。要实现一次表单提交同时触发两个函数，可选择以下两种常用方案：

方案1：包装统一的事件处理函数 #

编写一个新的入口函数，在内部按需求顺序调用validation和exercise两个函数，再把这个入口函数绑定给onsubmit即可：

var myform = document.forms.hform; // hform为表单的name属性值

myform.onsubmit = function() {
  // 先执行表单验证，保留验证返回值用于控制表单提交
  const isValidatePass = validation();
  // 再执行消息输出函数
  exercise();
  // 验证不通过时return false会阻止表单默认提交跳转
  return isValidatePass;
};

这种写法兼容性极强，可适配所有版本的浏览器。

方案2：使用标准事件监听方法绑定（推荐） #

调用DOM标准的addEventListener方法给submit事件绑定处理函数，同一个事件支持绑定多个处理逻辑，不会出现覆盖问题：

var myform = document.forms.hform;

myform.addEventListener('submit', validation);
myform.addEventListener('submit', exercise);

注意：使用这种写法时，如果validation需要在验证失败时阻止表单提交，不能直接用return false，需要给函数传入事件对象，在验证失败时调用e.preventDefault()实现提交拦截，适配写法示例如下：

function validation(e) {
  // 自定义表单验证逻辑
  const isPass = /* 你的验证判断条件 */;
  if (!isPass) {
    e.preventDefault(); // 拦截表单默认提交行为
    // 你的错误提示逻辑
  }
}

这种写法是现代前端开发的推荐方案，后续新增、移除单个事件处理逻辑时不会影响其他已绑定的函数，维护性更好。

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