asp.net 中的onclick和onclientclick事件

        在web开发中,onclick和onclientclick挺常见的。onclick事件是服务端事件,执行C#代码,先执行postback,在执行他的方法。onclientclick事件是客户端事件,通常执行javascript,在浏览器运行。如果一个按钮既有onclick事件又有onclientclick事件,他们的执行顺序是先onclientclick事件,再是onclick事件。由于onclick事件要和服务端交互,所以他的效率不如onclientclick,在一些不必要和数据库打交道的,就用onclientclick事件就行,需要和数据库打交道的再用onclick事件,这样就能提高效率,节省资源。

        例如,往数据库里添加手机号码,往数据库里添加之前要判断他的长度和首位不能是0,如果在后台哟onclick判断,不正确还得返回来,所以可以用onclientclick事件在前台判断。当然这里用正则表达式也可以。

        页面代码:

	<input id="txtPhone" type="text" />        
	 <asp:Button ID="btnAdd" runat="server" Text="添加" OnClientClick="return Check()" OnClick="btnAdd_Click" />


        如图,

           

        js代码:判断长度为11并且第一个不能为0.

<script  type="text/javascript">
        function Check() {            
            var phone = document.getElementById("txtPhone1").value;
            var first=phone.substring(0, 1);
            if (phone.length == 11 & first!=0) {                
                return true;
            } else {
                return false;
            }
        }
    </script>

        若我们输入“12345678912”,则会执行后台的onclick事件的代码。如果我们输入的不是11位或者第一位为0,则不执行后台的代码。这里后台执行向前台显示“正确的号码”,显示结果如下:


        要注意的是,如果我们去掉onclientclick里的return,则达不到效果,无论我们输入的是什么,他都会执行后台onclick事件。

<span style="white-space:pre">	</span><input id="txtPhone1" type="text" />
        <asp:Button ID="btnAdd" runat="server" Text="添加" OnClientClick="Check()" OnClick="btnAdd_Click" />
结果如下:

        总结OnClientClick中我们常用来做一些客户端的检测,检测通过了可以在执行后台的代码.当然放在服务器也可以做同样的检测,但这样做的代价是与服务器进行交互,消耗资源。



你可能感兴趣的:(asp.net 中的onclick和onclientclick事件)