博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

form.submit(), form.onsubmit(), onsubmit=""

Posted on 2012-03-18 12:08  bw_0927  阅读(602)  评论(0)    收藏  举报

http://www.web600.net/html/editor/JavaScript/201001281666.html

http://www.web600.net/html/editor/JavaScript/201001281667.html

http://www.web600.net/html/editor/JavaScript/201001281668.html

当用javascript调用form的方法submit直接提交form的时候,submit事件(onsubmit)不响应。

在日常的开发中,往往在表单被提交之前需要加上验证(验证日期格式是否正确,验证某个input是否为空…),首先想到的就是 onsubmit事件,在一个submit类型按钮点击时,首先触发的就是form的onsubmit()事件。这时,我们就可以写上自己的验证。代码如下:

<form action="1.asp" method="post" name="form1"  onsubmit=“alert(‘执行了onsubmit事件’);return true;”>  
  <input type="submit" name="save" value="保存" />  
</form> 

 但是如果我们直接调用form的submit()事件,却不会执行onsubmit(),代码如下:

<form action="1.asp" method="post" name="form1"  onsubmit=“alert(‘执行了onsubmit事件’);return true;”>   ”>  
  <input type="button" name="save" value="保存" onclick=”this.form.submit();” />  
</form> 

 我们如果想调用form的onsubmit事件只能通过调用,只有这样,才能执行这个事件:

<form action="1.asp" method="post" name="form1"  onsubmit=“alert(‘执行了onsubmit事件’);return true;”>   ”>  
  <input type="button" name="save" value="保存" onclick=”this.form.onsubmit();” />  
</form> 

但是这样就失去了submit功效。也许我们可以用(attachEvent() / addEventListener() )模拟触发器的方式实现,语法如下(下面部分是转载内容……):

有时候当某一对象的某一事件被触发时,它所要执行的程序可能是一大串,有可能是要呼叫某一函数,也有可能同时又要呼叫另一函数。

document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;


如果这样写,那么将会只有medhot3被执行
在IE中使用addachEvent ,

var btn1Obj = document.getElementById("btn1");
//object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);

执行顺序为method3->method2->method1


Mozilla系列中需要使用 addEventListener

var btn1Obj = document.getElementById("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);
执行顺序为method1->method2->method3
 
分析了一下原因:onsubmit属性的触发时机是在form用input:submit这样的button提交时才会触发,否则不会触发。
后来,在官方文档上也找到了如下说明,证明了我的这一分析,如下:
The submit method does not invoke the onsubmit event handler. Call the onsubmit event handler directly. When using Microsoft® Internet Explorer 5.5 and later, you can call the fireEvent method with a value of onsubmit in the sEvent parameter.
为了证实这一分析,我做了一个完整的测试:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
    
<script language="javascript">
        
function t(){
            
var f=document.getElementById("f");
            f.submit();
            alert(
'333');
        }
    
</script>
</HEAD>
    
<BODY>
<form id="f" onsubmit="alert('2222');">
    
<input type="submit" value="submit" /> 
    
<input type="button" value="button" onclick="t();"/>
</form>
</BODY>
</HTML>点击submit按钮即可出现“2222”提示,点击button的话,会出现“333”提示。