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。
 
  

你可能感兴趣的:(onclick)