一、問題描述
當用js調用form的方法submit直接提交form的時候，submit事件不響應。為什么？知道的請回復。類比一下，我用input.select()做了測試，卻能響應select事件。這個原因先放一邊，我們看看先怎么把眼下的問題解決了。
不響應事件的代碼示例：
<form id="form1" action="http://www.VeVbcom"></form>
<script type="text/javascript">
var form = document.getelementbyid('form1');
form.onsubmit = function() {
alert(1);
};
form.submit();
</script>
實際運行，不會有alert出來。
雖然用submit方法來提交表單有違unobtrustive javascript的原則，但有時候不得不用，比如做搜索提示（auto-complete)選中item之后就需要用js來提交搜索表單。
二、問題分析
既然本身不響應事件，那只有手工觸發這些事件了，確定手工觸發方案之前先回顧一下事件的注冊方式：
“原始”的注冊方式有兩種，看代碼示例：
<form id="form1" action="http://www.49028c.com" onsubmit="alert(1)"></form><form id="form1" action="http://www.49028c.com"></form>
<script type="text/javascript">
document.getelementbyid('form1').onsubmit = function() {
alert(1);
}
</script>
這樣的注冊事件，會給form增加了一個方法onsubmit。所以，可以通過直接執行這個方法，等同于手工觸發了事件。
看代碼示例：
<script type="text/javascript">
form.onsubmit();
</script>
這樣可以得到一個alert。
但是在如今“先進”的dom2標準注冊方式以及ie的注冊方式attachevent已經很常用。這些注冊方式，onsubmit方法是不存在的，如果使用form.onsubmit()會直接報錯。
三、解決方案
當然“先進”的注冊方式本身也提供了手工觸發事件的解決方案，只是要針對dom2標準和ie寫不同的程序，另外這個程序，對“原始”的注冊方式也一樣有效。請看代碼示例：
<script type="text/javascript">
//ie fire event
if (form.fireevent) {
form.fireevent('onsubmit');
form.submit();
//dom2 fire event
} else if (document.createevent) {
var ev = document.createevent('htmlevents');
ev.initevent('submit', false, true);
form.dispatchevent(ev);
}
</script>
四、代碼總結
這里不再對各細節方法做說明，不熟悉的朋友請自行查閱相關資料。我們把整個代碼串起來：
<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gbk">
<title>submit</title>
<script type="text/javascript" src="http://k.kbcdn.com/js/yui/build/utilities/utilities.js"></script>
</head>
<body>
<form id="form1" action="http://www.49028c.com"></form>
<script type="text/javascript">
var form = document.getelementbyid('form1');
//yui register event
yahoo.util.event.on('form1', 'submit', function() {
alert('yui');
});
//dom0 register event
form.onsubmit = function() {
alert(1);
};
//dom2 register event
if (form.addeventlistener) {
form.addeventlistener('submit', function() {
alert(2);
}, false);
//ie register event
} else if (form.attachevent) {
form.attachevent('onsubmit', function() {
alert(2);
});
}
//ie fire event
if (form.fireevent) {
form.fireevent('onsubmit');
form.submit();
//dom2 fire event
} else if (document.createevent) {
var ev = document.createevent('htmlevents');
ev.initevent('submit', false, true);
form.dispatchevent(ev);
}
</script>
</body>
</html>
整個跑下來有個小問題，fx下，不需要form.submit()，直接把表單給提交出去了，所以這句也省掉了，原因知道的請回復。
這個demo在ie6/ie7/fx下測試通過。
新聞熱點
疑難解答
