JavaScript 在所有表单上提交事件？

Question

我试图捕获给定页面上所有表单的提交事件(这是动态的)

到目前为止我得到了什么:

/**
* Capture form submits
*/
function addEvent(evnt, elem, func) {
    if (elem.addEventListener) {  // W3C DOM
        elem.addEventListener(evnt,func,false);
    } else if (elem.attachEvent) { // IE DOM
        elem.attachEvent("on"+evnt, func);
    } else { // No much to do
        elem[evnt] = func;
    }
}

var formsCollection = document.forms;
for(var i=0;i<formsCollection.length;i++) {
    //alert(formsCollection[i]);
    var form = document.forms[i];
    addEvent('submit', form, function(e) {
        var validated = true;
        // do form validation
        alert(i);
        if (!validated) {
            e.preventDefault();
        }

        return validated;
    });        
}

问题是这只捕获最后一个表单。

有什么想法吗？

Answer 1

那里有几个问题。

最主要的是事件处理程序的所有副本都关闭了同一个 i 变量。他们可以访问变量，而不是他们创建时的变量副本。所以他们都看到了循环结束后的 i。 (更多:Closures are not complicated)

通常的解决方法是有一个处理程序构建器函数:

for(var i=0;i<formsCollection.length;i++) {
    //alert(formsCollection[i]);
    var form = document.forms[i];
    addEvent('submit', form, makeHandler(form));
}

function makeHandler(form) {
    return function(e) {
        var validated = true;
        // do form validation using `form`
        if (!validated) {
            e.preventDefault();
        }
    };
}

第二个问题是您的 addEvent 不能正确处理旧版本的 IE。具体来说，您的处理程序依赖于能够调用 e.preventDefault()(如果该函数不存在，它会抛出异常)，但是您获得的事件对象上不存在该函数当您使用 attachEvent 时。您也不能确保处理程序甚至有一个事件对象，因为使用 attachEvent 的 IE 不会将事件对象作为参数传递；这是一个全局变量。

要解决这个问题，您可以处理事件对象并提供 preventDefault:

function addEvent(evnt, elem, func) {
    if (elem.addEventListener) {  // W3C DOM
        elem.addEventListener(evnt,func,false);
    } else if (elem.attachEvent) { // IE DOM
        elem.attachEvent("on"+evnt, function(e) {
            e = e || window.event; // It won't be there, but just in case
            if (!e.preventDefault) {
                e.preventDefault = preventDefaultOnIE;
            }
            func.call(this, e);
        });
    } else { // No much to do    // <== I recommend throwing an exception here
        elem[evnt] = func;       //     or something, since your script won't work correctly
    }
}

function preventDefaultOnIE() {
    this.returnValue = false;
}

如果你想更彻底并且也有stopPropagation，做和上面的preventDefault一样的事情并使用:

function stopPropagationOnIE() {
    this.cancelBubble = true;
}