一.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>