onclick、onserverclick、onclientclick

原文链接：https://blog.csdn.net/HiLiu_/article/details/134539854

第一部分:onclick、onserverclick

HTML控件，如input还有a标签，只有onclick ( 客户端）和onserverclick（服务端）事件，而没有onclientclick事件。

　(一).onclick（客户端）事件

（注意不加runat="server"）

<input type="button" value="按钮" onclick="Myonclick()" />

　　　然后js调用

<script>
        function Myonclick() {
            alert("触发了onclick事件！");
        }
    </script>

   (二).onserverclick（服务端）事件  

（注意这里要加上 runat="server" ）

<input type="button" value="按钮" id="btn" onserverclick="btn_ClickServer" runat="server"/>

　　.cs代码 

public void btn_ClickServer(object sender, EventArgs e)
    {
 
        string str = "<script>alert('你触发了onclickServer事件');</script>";
        Response.Write(str);
        Response.End();
    }

上述两种事件，Onclick先于OnserverClick执行；

第二部分:onclientclick，onclick

（一）onclientclick，onclick二者的区别与联系

WEB控件，如<asp:button>等，只有onclientclick( 客户端）和onclick （服务端）事件，而没有onserverclick事件。

OnClientClick是客户端脚本，一般使用javascript，在客户端，也就是IE中运行，点击后马上执行;
OnClick是服务器端事件处理函数，使用C#或者vb.net，在服务器端，也就是IIS中运行，点击按钮后，执行postback，之后再运行。

我们通常使用OnClientClick事件来做一些客户端的检测，当然也可以把检测放在服务器端执行，但这样做的代价是与服务器进行交互，消耗资源。

其实有的时候需要客户端和服务端双重校验，为什么这么说呢？ 比果说，一个用户名的文本框，在客户端我们通过JS校验，只能输入字母和数字，不能有特殊字符！通常情况下是没有问题的，但是总有那么一丢丢人想方设法的去“搞破坏” ，这个时候就需要进行双重校验了！说白了，就是服务端和客户端都进行校验！

如果一个按钮既有OnClientClick事件处理方法又有OnClick事件处理方法，当我们单击这个按钮时，先触发客户端事件，再触发服务器端事件，如果客户端事件返回值为false，那么服务器端对应的方法永远不会执行。这样就达到检测的目的，只有检测通过才能执行服务器端的方法。

（二）OnClientClick和OnClick的执行问题

1、执行OnClientClick且可能执行OnClick

如下列中，OnClientClick处是‘return buttonclick()’，是不会执行OnClick事件的(但并不是一定不会执行，只是本例中的buttonclick()方法返回了false而已。可以丰富条件判断，符合一定条件时将buttonclick()方法返回true,则有可能执行Onclick事件)。

javascript:

    <script language="javascript" type="text/javascript">
        function buttonClick() {
            alert("我是客户端点击事件");
            return false;     
        }
 
     </script> 

页面代码：（注意，OnClientClick处是‘return buttonclick()’,不是'buttonclick()'）

 <form id="form1" runat="server">
    <div>
        <asp:Button ID="Button1" runat="server" Text="些Button是服务端控件，默认使用OnClientClick事件，请禁用浏览器的Js功能体验"
            OnClick="Button1_Click" OnClientClick="return buttonClick();" />
        <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
    </div>
   </form> 

.cs代码：

protected void Button1_Click(object sender, EventArgs e)
{
    this.Label1.Text = "我是服务端点击事件";
} 

 在上方例子中，只弹出了JS中的代码！通过return false 来"屏蔽"服务端的校验！好处是什么？ 就是不用刷新页面呀！

（三）执行OnClientClick且一定会执行OnClick

但是，如果还是上方的代码，将OnClientClick处‘return buttonclick()’变为‘buttonclick()’，即OnClientClick="buttonClick()"。那么OnClick一定会发生(即便buttonClick()方法本身始终返回false).

 <form id="form1" runat="server">
    <div>
        <asp:Button ID="Button1" runat="server" Text="些Button是服务端控件，默认使用OnClientClick事件，请禁用浏览器的Js功能体验"
            OnClick="Button1_Click" OnClientClick="buttonClick();" />
        <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
    </div>
 
   </form> 

（四）执行OnClientClick且一定不会执行OnClick

如果写为OnClientClick="buttonClick();return false"，则OnClick事件一定不会被执行，因为return false使得始终使客户端返回false。

 <form id="form1" runat="server">
    <div>
        <asp:Button ID="Button1" runat="server" Text="些Button是服务端控件，默认使用OnClientClick事件，请禁用浏览器的Js功能体验"
            OnClick="Button1_Click" OnClientClick="buttonClick();return false" />
        <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
    </div>
   </form> 
  

第三部分：总结：

总之，客户端点击事件先于服务器点击事件执行。也就是说，先执行客户端的js，然后到服务器端执行服务器的相关代码。