如何在不使用 HTML 事件属性的情况下监听 JavaScript 中的表单提交事件？

在没有 HTML 事件属性的 JavaScript 中监听表单提交事件

在 Web 开发中，处理表单提交事件对于验证用户输入和执行自定义操作至关重要。传统上，开发人员使用 onSubmit 或 onClick 等 HTML 属性来侦听这些事件。但是，这种方法需要修改 HTML 代码，这可能不方便且容易出错。

使用事件监听器监听

要在没有 HTML 事件属性的纯 JavaScript 中监听表单提交事件，请利用EventTarget 接口的 addEventListener() 方法。这允许您将事件侦听器附加到表单元素，而无需修改其 HTML 标记。

<code class="javascript">var formElement = document.querySelector("form");

if (formElement.addEventListener) {
  formElement.addEventListener("submit", eventHandler, false); // Modern browsers
} else if (formElement.attachEvent) {
  formElement.attachEvent("onsubmit", eventHandler); // Old IE
}

function eventHandler(event) {
  // Handle form submission
}</code>

每当提交表单时，都会执行 eventHandler 函数。您可以在此函数中执行验证逻辑或其他自定义操作。

阻止默认表单提交

如果要阻止默认表单提交行为，请在事件上调用 PreventDefault() 方法事件处理程序中的对象：

<code class="javascript">document.querySelector("form").addEventListener("submit", function(event) {
  if (!isValid) {
    event.preventDefault(); // Prevent the form from submitting
  }
});</code>

使用 EventTarget.addEventListener

EventTarget.addEventListener 方法受到现代浏览器的广泛支持。它提供了一个跨浏览器解决方案，用于侦听各种 DOM 元素（包括表单元素）上的事件。

库的替代方案

如果您更喜欢使用库，请考虑以下选项：

• jQuery: $(ele).submit(callback);
• React: const call = (event) =>; {}；
• Vue: @submit="mySubmitHandler"

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