在 JavaScript 中监听表单提交事件而不修改 HTML

在本文中，我们解决了在不修改 HTML 的情况下监听表单提交事件的常见挑战必须修改 HTML 代码。我们不依赖 HTML 中的 onClick 或 onSubmit 属性，而是提供纯 JavaScript 解决方案。

为了实现这一点，我们利用 EventTarget.addEventListener 方法。此方法允许我们注册一个回调函数，当表单元素上发生特定事件时将执行该回调函数。

var ele = /*Your Form Element*/;
if (ele.addEventListener) {
  ele.addEventListener("submit", callback, false); // Modern browsers
} else if (ele.attachEvent) {
  ele.attachEvent('onsubmit', callback); // Old IE
}

将“ele”替换为对表单元素的引用，并将“callback”替换为提交表单时要执行的函数。

防止本机表单提交行为（即，刷新页面），在回调函数中使用 .preventDefault() 方法：

document.querySelector("#myForm").addEventListener("submit", function (e) {
  if (!isValid) {
    e.preventDefault(); // Stop form from submitting
  }
});

使用库监听提交事件

虽然没有必要，但您可能更喜欢使用库来监听提交事件。以下是使用常用库的方法：

jQuery

$(ele).submit(callback);

示例

[jsfiddle.net/DerekL/wnbo1hq0/show](http://jsfiddle.net/DerekL/wnbo1hq0/show)

通过使用这些技术，您可以轻松监听 JavaScript 中的表单提交事件，而无需接触 HTML 代码。