OnClientClick与OnClick事件的区别

　　在web开发中,经常要用到控件的OnClientClick与OnClick事件。

　　如果使用不当,经常会遇到一些意料之外的事情发生,让人摸不着头脑.下面就将我的一些小小总结道来:

 

　　首先我们要了解这两个事件:

　　OnClientClick是客户端事件方法，一般采用JavaScript来进行处理，也就是直接在客户端浏览器运行.一点击就运行。

　　OnClick事件是服务器端事件处理方法，在服务器端，也就是IIS中运行。点击按钮后,执行postback,再运行。

 

　　如果一个按钮上我们同时有客户端的OnClientClick方法又有OnClick事件处理方法，如何才能按照正常的逻辑运行呢？

 

　　OnClientClick中我们常用来做一些客户端的检测。当然放在服务器也可以做同样的检测,但这样做的代价是与服务器进行交互、消耗资源，而且用户体验不好...

　　例:

　　fun_DelConfirm()为一javascript函数，btnDel_Click是按钮的点击事件。

 

<asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" 
CommandName="Delete" OnClientClick="return fun_DelConfirm();" Text="删除">

 

　　需要注意的是当我们点击这个按钮时,自动先执行客户端的JS代码，再执行服务器端的。如果客户端返回的是false，那么服务器端对应的方法永远不会执行。这样就达到检测，只有通过才去执行服务器端的方法。

也就是说如果我们上面写成:

 

<asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" 
CommandName="Delete" OnClientClick="return fun_DelConfirm();return false;" onclick="return btnDel_Click;"Text="删除">

 

　　那么不管fun_DelConfirm执行的结要如何，服务器端对应的fun_DelConfirm方法都永远不会执行，因为return false使得始终使客户端返回false。

如果我们写成:

 

<asp:Button ID="btnDel" Width="80px" CssClass="buttonstyle" runat="server" Text="删除" OnClientClick="fun_DelConfirm();"OnClick="btnDel_Click" />

 

　　那么fun_DelConfirm() 和 btnDel_Click都有会执行。这样同样也达不到效果，也就是说你没有通过检测也去执行服务器的方法了。

最好的方法其实是客户端检测一下，如果检测不正确就不执行服务端方法，检测正确再执行服务端方法。

 

今天的讲解就到此，谢谢您的阅读，下次再见。

如果您觉得这篇博客对您有所启发，不妨点击一下右下角的【推荐】按钮。

如果您对本博客内容感兴趣，请继续关注我，我是Bull Li。