在asp.net引入事件驱动之后，在一个页面上很容易解决多个按钮触发不同事件的问题，避免了在asp中需要多个form或者通过js脚本来控制的麻烦。 asp.net带来便利的同时，也带来一个问题。在实际应用中一个页面存在多个按钮的情况并不多。用户习惯于在输入框输入内容之后，直接按回车就提交表单了。由于asp.net采用的是事件驱动模式，所以默认用户按回车并没有触发按钮的onclick事件。用户按回车也不是没有提交表单，通过httpwath可以看到，实际上页面表单是提交到了form下的action页面，只不过没有触发onclick事件而已。 在asp.net事件驱动模式下面，要实现通过回车来触发事件，必须要借助js脚本来实现。 在asp.net的aspx页面中，form的代码： 复制代码 代码如下: <form id="form1" runat="server"> 但在访问页面的源代码中可以看到： 复制代码 代码如下: <form name="form1" method="post" action="Default.aspx" id="form1"> 所以在输入框默认直接按回车，其实就是把表单提交到了form的action对应的页面，而并没有触发任何事件。 奇怪的地方：当一个aspx页面上没有使用web控件的时候，在输入框里按回车，默认是不会触发任何一个button按钮的onclick事件；但当页面上有使用web控件的时候，在输入框里按回车，默认会触发第一个button的onclick事件。【这里的第一指页面代码中最先出现的button控件，包括web控件内的button控件】 下面说说如何通过js来触发button按钮的onclick事件。 默认的button控件，在html中的代码是这样的： 复制代码 代码如下: <input type="submit" name="Button1" value="Button" id="Button1" /> 实际上点击这个button触发的onclick事件调用了一个js脚本：__doPostBack(eventTarget, eventArgument) button 控件有个属性：UseSubmitBehavior，默认是true，当你修改为false的时候，再去看html的源代码，就能清楚的看到调用的js脚本函数。 复制代码 代码如下: <input type="button" name="Button1" value="Button" onclick="javascript:__doPostBack('Button1','')" id="Button1" /> 生成的js脚本： 复制代码 代码如下: <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> 了解了这块内容，要处理输入框按回车触发button的onclick事件就简单的多了，就是截获输入框按回车的这个动作，然后通过js调用__doPostBack这个函数就OK了输入框： 复制代码 代码如下: <input name="TextBox1" type="text" id="TextBox1" onkeydown="return KeyDown('Button1');" /> <input type="submit" name="Button1" value="Button" id="Button1" /> js脚本 复制代码 代码如下: 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代码： 复制代码 代码如下: <input type="submit" name="WUC11$Button2" value="Button" id="WUC11_Button2" /> __doPostBack中用到的是input按钮的name属性，web控件中button，在生成的html代码里会加上控件的ID，所以传递的 button名称不要写错了。

　　推荐阅读

　　6款经典实用的jQuery小插件及源码(对话框/提示工具等等)

jQuery是一款当之无愧的JS开源框架，凭借其小巧实用占领了很大的开发市场，jQuery另外一个优势就是拥有丰富多彩的插件，这些插件可以帮助你简化很多的开发过程。下面介绍的6款实用jQuery小插件及源码，希望大家喜欢>>>详细阅读

本文标题：js触发asp.net的Button的Onclick事件应用

地址：http://www.17bianji.com/kaifa2/JS/22362.html

 1/2    1