表单元素的submit()方法和onsubmit事件

 

• 一、表单元素中出现了name="submit"的元素
• 二、elemForm.submit();不会触发表单的onsubmit事件
• 三、动态建立表单时遇到的问题

表单元素拥有submit方法，同时也具备onsubmit事件句柄，用于监听表单提交。可使用elemForm.submit();方法触发表单提交。

一、表单元素中出现了name="submit"的元素

这种状况下elemForm.submit();将不会触发表单提交，由于表单原始的submit方法将会被覆盖（formElem.submit就是对该元素的引用）。

二、elemForm.submit();不会触发表单的onsubmit事件

没有为何，标准中就是这么规定的。

与此有些相似的是onfocus、onblur和focus()、blur()之间的关系却不一样，调用elem.blur()或elem.focus()却会触发onblur和onfocus事件。

这些为咱们提供了一个思路，在设计一些UI组件时，须要考虑一些事件在内部调用时是否要触发相关事件。 例如Dialog组件，它具备onopen事件，同时返回的对象也会有open()方法，咱们这时就必须考虑下open()方法是否须要触发onopen()事件。

三、动态建立表单时遇到的问题

常常使用的一种方法以下，他会在表单submit前调用，根据validate()函数的返回值决定是否须要提交表单。

<form onsubmit="return validate();"></form>

然而，若是要动态地为一个表单添加验证，即HTML代码中没有写onsubmit，而在页面加载后用javascript给这个form加一个handler，问题就 来了。假设咱们已经获得了表单的DOM节点，保存在变量elemForm中，通常这样来给它加上handler：

var check = function() {
    if ('OK') {
        return true;
    } else {
        return false;
    }
};
if (elemForm.addEventListener) {
    elemForm.addEventListener("submit", check, false);
} else if (elemForm.attachEvent) {
    elemForm.attachEvent("onsubmit", check);
}

问题就出现了：在Firefox和Chrome中"return false;"是不能阻止表单的提交的(在IE中能够)，这就是为何你们在onsubmit属性中要写"return check()"，而不单单是"check()"。

缘由是什么呢？请看ECMAScript Language Binding，其中明确地写着，"Object EventListener: This is an ECMAScript function reference. This method has no return value. The parameter is a Event object"，意思就是event listener没有返回值。 换一种理解，addEventListener能够为元素绑定多个监听函数，某一个事件监听函数的返回值，不能够做为整个事件的返回值。可使用下面的方法解决

function check(ev) {
    ev = ev || window.event; // Event对象
    if (ev.preventDefault) { // 标准浏览器
        e.preventDefault();
    } else { // IE浏览器
        window.event.returnValue = false;
    }
}

其实一切的根本都由于IE不支持DOM Level 2。