参数传递的四种方法及HTML中button绑定事件的三种方式

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
  <title></title> 
  <script type="text/javascript"> 
    function Go() { 
      window.location.href="localhost:21811/Handler1.ashx?id=1&name='abc'" 
    } 
  </script> 
</head> 
<body> 
  
  <!--//参数传递的几种形式-->
  <!--第一种:直接在URL后面加参数:-->
  localhost:21811/Handler1.ashx?id=1&name="abc" 
  
  
  <!--第二种:用超链接的方法传递参数:当点击超链接的时候,首先会跳转到localhost:21811/Handler1.ashx页面,然后还会传递id 和name 两个参数过去-->
  <a href="localhost:21811/Handler1.ashx?id=1&name='abc'">超链接传递参数</a></body> 
  
  <!--第三种:通过js方法传递:用户点击这个button按钮,触发onClick事件,执行Go()方法,跳转到localhost:21811/Handler1.ashx页面,同时传递了id,和name两个参数过去-->
  <input type="button" οnclick="Go()" value="通过js方法传递参数" /> 
  
    
  <!--第四种:通过form表单传递-->
  <form action="Handler1.ashx" method="get"><!--注意action里面的连接不能带参数的-->> 
    <input type="text" name="id" value="3" /> 
    <input type="text" name="name" value="abc" /> 
    <input type="submit" value="通过传递参数" /> 
  </form> 
</body> 
</html>


HTML中为button绑定事件的方式有三种。

例如以下标签:

<button type="submit" id="btn_submit"> submit </button>

一、使用jQuery进行绑定

$('#btn_submit').click(function(){

});


二、使用原声js绑定

document.getElementById("#btn_submit").addEventListener(‘click’, function(){

}, false);


三、直接在button标签中使用onclick绑定

<button type="submit" id="btn_submit" οnclick="btnAction()"> submit </button>

然后在<script>标签中定义btnAtion的方法

<script>
        function btnAction()
        { }

</script>


比较:

1、使用jquery绑定,代码简洁,使用方便,事件绑定方式为追加绑定,即绑定多少个方法就执行多少个方法。

在单一绑定的条件下,由于jQuery底层其实也是js实现,所以速度区别并不大。至少“绑定”这个环节并不会成为

速度的瓶颈,除非页面上绑定事件的元素超过上万个,否则响应速度就不必纠结了,只做个事件绑定还是很快的。

所以在做负载等要求不那么严格的“小程序”,从维护的角度上,建议用jQuery绑定,简单清楚,最容易维护。

2、使用原生js,代码量稍大,事件绑定方式为复写绑定,即绑定多个只保留最后一个绑定的方法。

原生js,这是真正的熟练者的工具,如果能写明白更好。

3、使用onclick标签绑定,代码量不大,但是html前端和js前端混在一起,不易于维护。

原则上HTML代码只能体现网页的结构,具体的行为应该使用JavaScript代码进行绑定。

如果在HTML中用onclick事件混杂js,会导致html前端和js前端的工作混在了一起,难以分离工作任务,

进而难以维护。这种做法临时调试可以,但如果正式成品中不应该出现,

所以不建议使用onclick标签方式进行绑定事件。


  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值