为何addEventListener监听submit事件失效？$('form').submit()与回车触发却正常

这个问题我之前处理过，本质是浏览器的原生行为规则导致的，咱们一步步来拆解：

为什么会出现这个差异？ #

手动调用form.submit()（包括jQuery的$('form').submit()）不会触发通过addEventListener绑定的submit事件——这是浏览器的设计逻辑：脚本主动调用的提交操作，会跳过事件触发环节，用来区分「用户交互触发的提交」和「脚本触发的提交」。而你在输入框按回车，属于用户触发的提交流程，会完整触发绑定的submit事件。

可行的解决方案 #

方案1：手动触发submit事件再提交 #

如果还是想用原生的事件绑定，可以手动创建并分发submit事件，模拟用户触发的流程，示例代码：

const form = document.getElementById("mform1");
// 创建符合原生行为的submit事件（允许冒泡、可取消）
const submitEvent = new Event('submit', { bubbles: true, cancelable: true });
// 触发事件，此时你的监听函数会执行
form.dispatchEvent(submitEvent);
// 如果事件没有被preventDefault，再执行实际的表单提交
if (!submitEvent.defaultPrevented) {
  form.submit();
}

方案2：抽离共用的处理函数 #

把表单提交的逻辑单独写成一个函数，不管是事件触发还是手动调用，都复用这个函数，这样就不用纠结事件触发的问题了：

// 抽离处理逻辑
function handleFormSubmit(e) {
  if (e) {
    e.preventDefault(); // 事件触发时阻止默认提交
  }
  alert('123');
  // 这里可以添加实际的提交逻辑，比如AJAX提交，或者手动调用submit()
  // form.submit();
}

// 绑定submit事件
document.getElementById("mform1").addEventListener('submit', handleFormSubmit);

// 手动提交时直接调用函数即可
// handleFormSubmit();

方案3：用jQuery的事件绑定（如果项目用jQuery） #

如果你的项目依赖jQuery，直接用jQuery的submit()方法绑定事件，这样调用$('form').submit()时会自动触发绑定的处理函数：

$('#mform1').submit(function(e) {
  e.preventDefault();
  alert('123');
});

// 调用时直接执行，会触发上面的处理逻辑
$('#mform1').submit();

内容的提问来源于stack exchange，提问作者Tiến Mạnh