亚洲一区二区中文在线,欧美国产日韩亚洲一区,午夜精品福利一区二区三区av

主頁 > 知識(shí)庫 > 表單Form的submit事件不響應(yīng)

表單Form的submit事件不響應(yīng)

一、問題描述
當(dāng)用JS調(diào)用form的方法submit直接提交form的時(shí)候，submit事件不響應(yīng)。為什么？知道的請(qǐng)回復(fù)。類比一下，我用input.select()做了測試，卻能響應(yīng)select事件。這個(gè)原因先放一邊，我們看看先怎么把眼下的問題解決了。
不響應(yīng)事件的代碼示例：
<form id="form1" action="http://www.jb51com"></form>
<script type="text/javascript">
var form = document.getElementById('form1');
form.onsubmit = function() {
alert(1);
};
form.submit();
</script>
實(shí)際運(yùn)行，不會(huì)有alert出來。
雖然用submit方法來提交表單有違Unobtrustive Javascript的原則，但有時(shí)候不得不用，比如做搜索提示（auto-complete)選中Item之后就需要用JS來提交搜索表單。
二、問題分析
既然本身不響應(yīng)事件，那只有手工觸發(fā)這些事件了，確定手工觸發(fā)方案之前先回顧一下事件的注冊(cè)方式：
“原始”的注冊(cè)方式有兩種，看代碼示例：
<form id="form1" action="https://www.jb51.net" onsubmit="alert(1)"></form><form id="form1" action="https://www.jb51.net"></form>
<script type="text/javascript">
document.getElementById('form1').onsubmit = function() {
alert(1);
}
</script>
這樣的注冊(cè)事件，會(huì)給form增加了一個(gè)方法onsubmit。所以，可以通過直接執(zhí)行這個(gè)方法，等同于手工觸發(fā)了事件。
看代碼示例：
<script type="text/javascript">
form.onsubmit();
</script>
這樣可以得到一個(gè)alert。
但是在如今“先進(jìn)”的DOM2標(biāo)準(zhǔn)注冊(cè)方式以及IE的注冊(cè)方式attachEvent已經(jīng)很常用。這些注冊(cè)方式，onsubmit方法是不存在的，如果使用form.onsubmit()會(huì)直接報(bào)錯(cuò)。
三、解決方案
當(dāng)然“先進(jìn)”的注冊(cè)方式本身也提供了手工觸發(fā)事件的解決方案，只是要針對(duì)DOM2標(biāo)準(zhǔn)和IE寫不同的程序，另外這個(gè)程序，對(duì)“原始”的注冊(cè)方式也一樣有效。請(qǐng)看代碼示例：
<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>
四、代碼總結(jié)
這里不再對(duì)各細(xì)節(jié)方法做說明，不熟悉的朋友請(qǐng)自行查閱相關(guān)資料。我們把整個(gè)代碼串起來：
<!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="https://www.jb51.net"></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>
整個(gè)跑下來有個(gè)小問題，F(xiàn)X下，不需要form.submit()，直接把表單給提交出去了，所以這句也省掉了，原因知道的請(qǐng)回復(fù)。
這個(gè)demo在IE6/IE7/FX下測試通過。

標(biāo)簽：營口北海眉山阜陽崇左河池晉中青海

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《表單Form的submit事件不響應(yīng)》，本文關(guān)鍵詞表單,Form,的,submit,事件,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。