从 onSubmit 事件处理程序中添加或减去函数？答案

【问题标题】：Add or subtract functions from onSubmit event handler?从 onSubmit 事件处理程序中添加或减去函数？
【发布时间】：2021-06-23 07:10:55
【问题描述】：

我有以下代码：

function showAddrBox() {
    var prompt = document.getElementById('addr_prompt');
    prompt.style.display = 'block';
    document.generic_form.address.style.display = 'block';
    document.generic_form.onsubmit = validateAddrForm;
}

function hideAddrBox() {
    var prompt = document.getElementById('addr_prompt');
    prompt.style.display = 'none';
    document.generic_form.address.style.display = 'none';
    document.generic_form.onsubmit = null;
}

问题是有时我想保留附加到onSubmit 的附加功能。我希望能够从onSubmit 事件中添加和删除单个函数，而不仅仅是使用onsubmit = 设置它们。换句话说，我需要一种方法来完成这样的事情：

document.form.onsubmit += function;
document.form.onsubmit -= function;

有什么想法吗？

【问题讨论】：

标签： javascript dom-events onsubmit

【解决方案1】：

Quirksmode 有一个wonderful article about advanced event registration。

简短的形式是：您可以使用addEventListener（在旧版本的 IE 中为attachEvent）绑定多个事件。

if (someform.addEventListener) {
  someform.addEventListener('submit', somefunc, false);
} else {
  someform.attachEvent('onsubmit', somefunc);
}

要删除它们，您可以分别使用removeEventListener 和detachEvent。

很快你就会因为重复输入addEventListener 和attachEvent 而烦恼，你可能会考虑编写一些通用代码来为你绑定事件。幸运的是，其他程序员也有同样的想法，并且有许多库可以优雅地处理事件管理。 jQuery 往往是首选库，因为绑定事件很简单：

$('#formid').submit(somefunc);

通用的事件绑定方法是：

$('#formid').on('submit', somefunc);

解除绑定可以使用：

$('#formid').off('submit', somefunc);

尽管所有这些都在jQuery API 中有详细记录。

【讨论】：

【解决方案2】：

使用element.addEventListener("eventName", callbackFunction, false) 和element.removeEventListener("eventName", callbackFunction)。

其中 eventName 是不带“on”的处理程序的名称。所以 onsubmit 变成了 submit。

有关这两个函数的文档，请参阅：

【讨论】：

工作就像一个魅力。谢谢。

【解决方案3】：

我要做的是在表单上设置一个 onSubmit 函数来协调其余函数，执行关于何时做什么的逻辑。在该函数执行结束时，如果您想继续提交，可以返回 true，否则返回 false。

【讨论】：

【解决方案4】：

你可以为下面的表单提及两个或多个函数。

<form name="formaname" onsubmit="function1(),function2()">