html submit提交事件,submit方法与onsubmit事件

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

测试代码如下：

var obj = document.getElementById('myform');

obj.onsubmit = function(){

alert('check');

return true;

}

obj.submit();

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

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

二.如何阻止表单的提交

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

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

1.dom0方式绑定

var obj = document.getElementById('myform');

var check = function(){

if ('error'){//验证出错的情况just a demo

return false;

}else{

return true;

}

}

obj.onsubmit = function(){

return check();

}

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

2.用dom2方式绑定(addEventListener)

看下面这段代码：

var obj = document.getElementById('myform');

var check = function(){

if ('error') {//验证出错的情况just a demo

return false;

}

else {

return true;

}

}

function addListener(element, type, handler){

if (!element) {

return;

}

if (element.addEventListener) {

element.addEventListener(type, handler, false);

}

else {//for ie

element.attachEvent("on" + type, handler);

}

}

addListener(obj, 'submit', check);

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

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函数的返回值是不起作用的。

解决方式：

function check(ev) {

if ('error') {//验证出错的情况just a demo

ev = ev || window.event; // Event对象

if (ev.preventDefault) { // 标准浏览器

ev.preventDefault();

} else { // IE浏览器

window.event.returnValue = false;

}

}

}

三．如何用代码触发onsumbit

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

1.dom0方式绑定(参见二.1)

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

if (obj.onsubmit() != false){

obj.submit();

}

2.dom2方式绑定(参见二.2)

if (obj.fireEvent) {//for ie

if (obj.fireEvent('onsubmit')){

obj.submit();

}

}

else if (document.createEvent){

var ev = document.createEvent('HTMLEvents');

ev.initEvent('submit', false, true);

obj.dispatchEvent(ev);

}