一．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 demo  return 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 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);
</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 demo  ev = 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 ie  if (obj.fireEvent('onsubmit')){  obj.submit();  }
}
else if (document.createEvent){  var ev = document.createEvent('HTMLEvents');  ev.initEvent('submit', false, true);  obj.dispatchEvent(ev);
}
</script>

转载自：submit方法与onsubmit事件

js submit方法与onsubmit事件相关推荐

submit方法与onsubmit事件
文章目录一．form的submit方法是否会触发onsubmit事件? 二. 如何阻止表单的提交 1.dom0方式绑定 2.用dom2方式绑定(addEventListener) 三．如何用代码触发 ...
php onsubmit方法,表单元素的submit()方法和onsubmit事件应用概述
表单元素拥有submit方法,同时也具有onsubmit事件句柄,用于监听表单提交.可以使用elemForm.submit();方法触发表单提交. 1.表单元素中出现了name="submi ...
js form表单onsubmit事件用法详解
onsubmit事件是当表单提交时进行相关js操作的一个事件.(但是有疑问) onsubmit 事件会在表单中的确认按钮被点击时发生.当该事件触发的函数中返回false时,表单就不会被提交. 请看下面 ...
表单元素的submit()方法和onsubmit事件
表单元素拥有submit方法,同时也具有onsubmit事件句柄,用于监听表单提交.可以使用elemForm.submit();方法触发表单提交. 1.表单元素中出现了name="submi ...
js设置form的onsubmit事件
document.getElementById('myform').onsubmit = function(e) {var e = e || window.event;if (e.preventDef ...
表单的提交onsubmit事件
看代码留个记录: <script>function func(){alert('false');return false;} </script> <div>< ...
前端：JS/32/form对象（表单）（form对象的属性，方法和事件），受返回值影响的两个事件（onclick事件，onsubmit事件），获取表单的元素对象的三种方式，表单的提交和验证方法总结
form 对象(表单) 一个<form>标记,就是一个<form>对象: 1,form对象的属性 name :表单的名称,主要用来让JS来控制表单: action :表单的数据 ...
form.submit 方法并不会触发 form.onsubmit 事件
做表单的时候发现一个奇怪的地方,总结下: form.submit 方法并不会触发 form.onsubmit 事件,看代码: <body><div class="cont ...
form的submit()方法不能触发onsubmit事件的解决方法，兼容各版本浏览器。
form的submit()方法不能触发onsubmit事件的解决方法,兼容各版本浏览器. 参考文章: (1)form的submit()方法不能触发onsubmit事件的解决方法,兼容各版本浏览器. ( ...

js submit方法与onsubmit事件