如何在不修改HTML的情况下用JavaScript监听表单提交事件？

在不修改 HTML 的情况下在 JavaScript 中监听表单提交事件

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

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

<code class="javascript">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
}</code>

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

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

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

使用库监听提交事件

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

jQuery

<code class="javascript">$(ele).submit(callback);</code>

示例

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

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

以上是如何在不修改HTML的情况下用JavaScript监听表单提交事件？的详细内容。更多信息请关注PHP中文网其他相关文章！