onClick和onclientclick区别

来源：互联网发布：只有我知台湾见面会编辑：程序博客网时间：2024/05/28 15:47

在Web开发过程中，onclick和onclientclick都是控件的事件，有自己对应的执行对象。例如：

<span style="font-size: 18px;">  <asp:Button ID="Button1"runat="server" OnClick="Button1_Click"Text="提交"  OnClientClick="return buttonClick();"/></span>

在这行代码中，有一个Web控件Button，代码runat="server"是自动生成的，表明该控件在服务器端运行，换句话说，既可在.cs文件中引用该控件；OnClick="Button1_Click"表明给服务器控件增加了一个服务端事件；而OnClientClick="return buttonClick()"表明给服务器控件增加了一个客户端事件。

对于OnClick和OnClientClick之间的关系如下：

1 onclientclick是客户端脚本，在客户端一般使用javascript，也有用vbscript等脚本语言，也就是IE中运行，点击后马上执行，不执行回传postback。

2onclick是服务器端事件处理函数，使用C#或vb.net等语言，在服务器端，也就是IIS中运行，点击按钮后，执行postback回传postback，之后再运行。

设计到postback，它是aspx页面回传机制问题，既页面在首次加载后向服务器提交数据，然后服务器把处理好的数据传递给客户端并显示出来，就是postback。

对于两者之间的执行顺序，我们不妨先做一个小例子，看看效果，再定结论。

在default.aspx页面中加入javascript脚本：

<span style="font-family:SimSun;font-size:18px;">    <script lang="javascript"type="text/javascript"  >        function buttonClick() {            alert("我是客户端代码！");            return false ;        }    </script></span>

页面控件代码：

<span style="font-family:SimSun;font-size:18px;"><body>    <form id="form1"name="form1" runat="server">         <p>            用户名：<asp:TextBoxID="TextBox1" name="textbox1"runat="server"></asp:TextBox>                </p>        <p>            密　码：<asp:TextBoxID="TextBox2" runat="server"></asp:TextBox>        </p>        <asp:Button ID="Button1"runat="server" OnClick="Button1_Click"Text="提交"  OnClientClick="return buttonClick();"/>    </form></body></span>

cs文件代码：

<span style="font-family:SimSun;font-size:18px;">        protected void Button1_Click(objectsender, EventArgs e)        {                  Response.Write("我是服务器端点击事件！");        }</span>

效果怎么样？不出意外的话，结果应该是显示“我是客户端代码！”而没有显示“我是服务器端点击事件！”这是为什么呢？

原理是：首先显示JS代码中的提示是因为：在Web服务器控件中，OnclientClick事件是优先于OnClick事件执行的，也就是说先执行的JS代码，所以显示提示，而没有显示服务端提示，是因为脚本语言的return false这句代码，这是什么意思呢：这句话决定了是否继续执行后台代码，也就是服务端代码，如果返回true，则继续执行后台代码，反之，不执行后台代码，换句话说，通过return false 来“屏蔽”服务端的程序运行，好处是可以避免面重新刷新页。

所以，你可以试试当把return false改成return true会怎么样？如果把return false去掉又会怎么样呢？自己可以去尝试一下.....

这个先后执行的顺序，让我想到了机房收费系统的一个例子（不知是否恰当），在点击登录的时候，要先进行文本框是否为空的判断，亦或是否有特殊字符等判断，通过这些客户端的验证后，才会提交给数据库判断，判断数据库中是否有该用户名，密码是否正确等判断，如果放到ASP.NET中，则判断是否为空等内容可放到客户端的javascript脚本中，如果通过验证则返回true，继续执行后台判断；如果客户端验证没有通过，则直接返回false，避免执行后台判断，减少系统的执行时间。

0 0