如何在不修改 HTML 的情况下检测 JavaScript 中的表单提交事件？

在没有 HTML 标记的情况下检测表单提交事件

在 JavaScript 中，一项常见任务涉及在提交表单之前验证表单。传统上，这是通过使用 onSubmit 和 onClick 等 HTML 属性来实现的。但是，要在不更改 HTML 代码的情况下创建独立的验证库，您需要更好的方法。

解决方案在于在 JavaScript 中本地监听表单的提交事件。具体操作方法如下：

<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 是您要在表单提交时执行的函数。

事件传播

要完全理解此代码，了解事件传播非常重要。考虑以下 HTML：

<code class="html"><form id="myForm">
    <input type="submit">
</form></code>

单击提交按钮时，会触发“提交”事件。该事件在 DOM 树中冒泡，从按钮开始，到表单元素结束。通过侦听表单本身的提交事件 (ele.addEventListener('submit'))，我们在事件沿着树向上传播时捕获该事件。

防止默认表单提交

如果您希望在表单提交时执行自定义操作（例如验证），您可以使用 PreventDefault() 来阻止浏览器的默认提交行为。

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

在上面的代码中，如果 isValid 为 false ，表单提交被阻止。

库集成

虽然首选使用原生 JavaScript，但一些开发人员更喜欢库。以下是如何使用流行的库监听表单提交事件：

• jQuery: $(ele).submit(callback);
• Prototype : ele.observe('提交', 回调);
• MooTools: ele.addEvent('提交', 回调);

通过了解事件传播并利用本机 addEventListener 或库集成，您可以有效地侦听 JavaScript 中的表单提交事件，而无需修改 HTML 代码。

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