onclick、onserverclick、onclientclick
原文链接:https://blog.csdn.net/HiLiu_/article/details/134539854
第一部分:onclick、onserverclick
HTML控件,如input还有a标签,只有onclick ( 客户端)和onserverclick(服务端)事件,而没有onclientclick事件。
(一).onclick(客户端)事件
(注意不加runat="server")
1 | <input type= "button" value= "按钮" onclick= "Myonclick()" /> |
然后js调用
1 2 3 4 5 | < script > function Myonclick() { alert("触发了onclick事件!"); } </ script > |
(二).onserverclick(服务端)事件
(注意这里要加上 runat="server" )
1 | <input type= "button" value= "按钮" id= "btn" onserverclick= "btn_ClickServer" runat= "server" /> |
.cs代码
1 2 3 4 5 6 7 | 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:
1 2 3 4 5 6 7 | < script language="javascript" type="text/javascript"> function buttonClick() { alert("我是客户端点击事件"); return false; } </ script > |
页面代码:(注意,OnClientClick处是‘return buttonclick()’,不是'buttonclick()')
1 2 3 4 5 6 7 | < 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代码:
1 2 3 4 | 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).
1 2 3 4 5 6 7 8 | < 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。
1 2 3 4 5 6 7 8 | < 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,然后到服务器端执行服务器的相关代码。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· Obsidian + DeepSeek:免费 AI 助力你的知识管理,让你的笔记飞起来!
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
2023-06-17 C# 报错:xxx正由另一进程使用,因此该进程无法访问此文件
2023-06-17 未授权访问
2022-06-17 将项目放在svn上