submit方法与onsubmit事件

文章目录

一．form的submit方法是否会触发onsubmit事件？
二. 如何阻止表单的提交
- 1.dom0方式绑定
- 2.用dom2方式绑定（addEventListener）
三．如何用代码触发onsumbit
- 1.dom0方式绑定（参见二.1）
- 2.dom2方式绑定（参见二.2）

一．form的submit方法是否会触发onsubmit事件？

测试代码如下：

<html><head><meta content="text/html; charset=gb2312" http-equiv="Content-Type"></head><form id='myform' target="_top" action="http://www.soso.com/q"><input type="text" name="w" value="ball"/><input type="submit" value="搜索" /></form><script>var obj = document.getElementById('myform');obj.onsubmit = function(){alert('check');return true;}obj.submit();</script>
</hmtl>

结果是，我们不会看到’check’的弹出框，所以结论是：

submit()方法不会触发onsubmit事件。

二. 如何阻止表单的提交

经常我们的提交表单前都会用js对表单内容作验证，如果有问题，则不希望提单表单。那么，如果阻止表单提交呢？

取决于你用什么方式给表单加入onsubmit事件。

1.dom0方式绑定

<script>var obj = document.getElementById('myform');var check = function(){if ('error'){//验证出错的情况just a demoreturn false;}else{return true;}}obj.onsubmit = function(){return check();}
</script>

用这种方式绑定onsubmit事件，表单能否提交取决于onsubmit函数的返回值。false时，表单不会提交。

2.用dom2方式绑定（addEventListener）

看下面这段代码：

<script>var obj = document.getElementById('myform');var check = function(){if ('error') {//验证出错的情况just a demoreturn false;}else {return true;}}function addListener(element, type, handler){if (!element) {return;}if (element.addEventListener) {element.addEventListener(type, handler, false);}else {//for ieelement.attachEvent("on" + type, handler);}}addListener(obj, 'submit', check);
</script>

你会发现，IE下，可以正常阻止表单提单，但FF及chrome下表单正常提交了…

原因：
ECMAScript Language Binding写明：

addEventListener(type, listener, useCapture)
The listener parameter is a EventListener object.

Object EventListener：This is an ECMAScript function reference. This method has no return value. The parameter is a Event object.

可见，listener是没有返回值的（写了也不会认），因此我们的check函数的返回值是不起作用的。

解决方式：

<script>
function check(ev) {if ('error') {//验证出错的情况just a demoev = ev || window.event; // Event对象if (ev.preventDefault) { // 标准浏览器ev.preventDefault();} else { // IE浏览器window.event.returnValue = false;}}
}
</script>

三．如何用代码触发onsumbit

这也取决于你用何种方式绑定onsubmit事件

1.dom0方式绑定（参见二.1）

这时直接调用onsumit方法即可，根据onsubmit()的返回值决定是否触发submit。

<script>
if (obj.onsubmit() != false){obj.submit();
}
</script>

2.dom2方式绑定（参见二.2）

<script>
if (obj.fireEvent) {//for ieif (obj.fireEvent('onsubmit')){obj.submit();}
}
else if (document.createEvent){var ev = document.createEvent('HTMLEvents');ev.initEvent('submit', false, true);obj.dispatchEvent(ev);
}
</script>