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

Question

我有以下代码:

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;

有任何想法吗？

Answer 1

Quirksmode有一篇关于高级事件注册的精彩文章.

简短形式是:您可以使用addEventListener(attachEvent在旧版本的IE中)绑定多个事件.

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中有详细记录.

Answer 2

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

其中eventName是没有'on'的处理程序的名称.所以onsubmit变成提交.

有关这两个函数的文档,请参阅:

• https://developer.mozilla.org/en/DOM/element.addEventListener
• https://developer.mozilla.org/en/DOM/element.removeEventListener