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,然后到服务器端执行服务器的相关代码。

posted @   yinghualeihenmei  阅读(54)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· Obsidian + DeepSeek:免费 AI 助力你的知识管理,让你的笔记飞起来!
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
历史上的今天:
2023-06-17 C# 报错:xxx正由另一进程使用,因此该进程无法访问此文件
2023-06-17 未授权访问
2022-06-17 将项目放在svn上
点击右上角即可分享
微信分享提示