快捷導(dǎo)航

js觸發(fā)asp.net的Button的Onclick事件應(yīng)用

更新時(shí)間：2013年02月02日 15:33:45 作者：

由于asp.net采用的是事件驅(qū)動(dòng)模式，所以默認(rèn)用戶按回車并沒有觸發(fā)按鈕的onclick事件。用戶按回車也不是沒有提交表單，通過httpwath可以看到，實(shí)際上頁(yè)面表單是提交到了form下的action頁(yè)面，只不過沒有觸發(fā)onclick事件而已,感興趣的朋友可以了解下，或許對(duì)你有所幫助

在asp.net引入事件驅(qū)動(dòng)之后，在一個(gè)頁(yè)面上很容易解決多個(gè)按鈕觸發(fā)不同事件的問題，避免了在asp中需要多個(gè)form或者通過js腳本來控制的麻煩。

asp.net帶來便利的同時(shí)，也帶來一個(gè)問題。在實(shí)際應(yīng)用中一個(gè)頁(yè)面存在多個(gè)按鈕的情況并不多。用戶習(xí)慣于在輸入框輸入內(nèi)容之后，直接按回車就提交表單了。由于asp.net采用的是事件驅(qū)動(dòng)模式，所以默認(rèn)用戶按回車并沒有觸發(fā)按鈕的onclick事件。用戶按回車也不是沒有提交表單，通過httpwath可以看到，實(shí)際上頁(yè)面表單是提交到了form下的action頁(yè)面，只不過沒有觸發(fā)onclick事件而已。

在asp.net事件驅(qū)動(dòng)模式下面，要實(shí)現(xiàn)通過回車來觸發(fā)事件，必須要借助js腳本來實(shí)現(xiàn)。
在asp.net的aspx頁(yè)面中，form的代碼：

復(fù)制代碼代碼如下:

但在訪問頁(yè)面的源代碼中可以看到：

復(fù)制代碼代碼如下:

所以在輸入框默認(rèn)直接按回車，其實(shí)就是把表單提交到了form的action對(duì)應(yīng)的頁(yè)面，而并沒有觸發(fā)任何事件。
奇怪的地方：當(dāng)一個(gè)aspx頁(yè)面上沒有使用web控件的時(shí)候，在輸入框里按回車，默認(rèn)是不會(huì)觸發(fā)任何一個(gè)button按鈕的onclick事件；但當(dāng)頁(yè)面上有使用web控件的時(shí)候，在輸入框里按回車，默認(rèn)會(huì)觸發(fā)第一個(gè)button的onclick事件?！具@里的第一指頁(yè)面代碼中最先出現(xiàn)的button控件，包括web控件內(nèi)的button控件】
下面說說如何通過js來觸發(fā)button按鈕的onclick事件。
默認(rèn)的button控件，在html中的代碼是這樣的：

復(fù)制代碼代碼如下:

實(shí)際上點(diǎn)擊這個(gè)button觸發(fā)的onclick事件調(diào)用了一個(gè)js腳本：__doPostBack(eventTarget, eventArgument)
button 控件有個(gè)屬性：UseSubmitBehavior，默認(rèn)是true，當(dāng)你修改為false的時(shí)候，再去看html的源代碼，就能清楚的看到調(diào)用的js腳本函數(shù)。

復(fù)制代碼代碼如下:

 
<input type="button" name="Button1" value="Button" onclick="javascript:__doPostBack('Button1','')" id="Button1" /> 

生成的js腳本：

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
//<![CDATA[ 
var theForm = document.forms['form1']; 
if (!theForm) { 
theForm = document.form1; function __doPostBack(eventTarget, eventArgument) { 
if (!theForm.onsubmit || (theForm.onsubmit() != false)) { 
theForm.__EVENTTARGET.value = eventTarget; 
theForm.__EVENTARGUMENT.value = eventArgument; 
theForm.submit(); } 
//]]> 
</script> 

了解了這塊內(nèi)容，要處理輸入框按回車觸發(fā)button的onclick事件就簡(jiǎn)單的多了，就是截獲輸入框按回車的這個(gè)動(dòng)作，然后通過js調(diào)用__doPostBack這個(gè)函數(shù)就OK了輸入框：

復(fù)制代碼代碼如下:

 
<input name="TextBox1" type="text" id="TextBox1" onkeydown="return KeyDown('Button1');" /> 
<input type="submit" name="Button1" value="Button" id="Button1" /> 

js腳本

復(fù)制代碼代碼如下:

 
function KeyDown(btn) { 
if (event.keyCode != 13) //按鍵不是enter鍵 return; else //按鍵是enter鍵 try { 
__doPostBack(btn, ''); 
return false; catch (e) { 
alert(e); 
return; } 
} 

如果要輸入框和button控件是在web控件里的，就需要特別注意：
控件中的button控件生成的html代碼：

復(fù)制代碼代碼如下:

__doPostBack中用到的是input按鈕的name屬性，web控件中button，在生成的html代碼里會(huì)加上控件的ID，所以傳遞的 button名稱不要寫錯(cuò)了。

您可能感興趣的文章: