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

最新推荐文章于 2023-02-02 13:40:05 发布
最新推荐文章于 2023-02-02 13:40:05 发布
阅读量1w 收藏 7
点赞数 2 
<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标签方式进行绑定事件。


yuanyaunlv
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Button点击事件绑定中如何传递带参数的方法
mrzhengttl的博客
05-09 2万+
btn.onClick.AddListener(delegate () { this.OnBtnClick(true); }); 传递一个有参数的方法用于传递参数。这样点击事件就能接收参数了。 using UnityEngine;   using UnityEngine.UI;      public class Test : MonoBehaviour 
HTML 事件
最新发布
lly202406的博客
06-18 737
HTML 事件是发生在 HTML 元素上的交互瞬间，它们可以由用户的行为（如点击、按键、鼠标移动等）或浏览器自身的行为（如页面加载完成、图片加载失败等）触发。在 HTML 和 JavaScript 的交互中，事件扮演着核心角色，允许开发者创建动态和响应式的网页。
微信小程序 button 等组件单击传递参数
sinat_33384251的博客
11-07 2070
首先在小程序端，加入一个 data-* 的参数，‘*’需要是小写，若写成大写会被转换为小写，支持‘-’号，如 <button bindtap="button-click" data-abc="{{value}}"></button > 然后在js文件中实现‘click’方法，通过event.currentTarget.dataset.*获取在小程序端写的值 button-click: function(event) { let abc= event.currentTarg
ItemsControl 控件模板 中Button 命令实现与多参数传递
weixin_43303279的博客
02-02 668
Wpf ItemsControl 控件使用多态模板，传递参数、绑定命令、传递多参
Tkinter Button控件command传参
weixin_57272288的博客
12-20 1万+
Tkinter里面有一个button事件 Button ( master, option=value, ... ) Button(根对象, [属性列表]) 根对象：在那个窗体显示，例如主窗体。 属性列表：是可选的属性=属性值组成。 属性 说明 text 标签显示的文本 font 设置文本的字体和大小 fg(foreground) 字体的颜色， bg (background) 标签的背景色 width 标签的宽度（一个中文的字体宽为单位）
表单form中<button>提交表单
dre的博客
08-10 2万+
表单中有button一旦点击就会自动提交表单，要给加上type=“button”属性才可以 阻止表单提交 如果没有type=“button” 注册按钮也会提交表单 login_check()返回值为true时才会提交表单
html事件（onclick、onchange等）传对象作为参数
fenfenguai的专栏
06-28 5179
其原理其实很简单就是把对象先解析成字符串然后再转换为json对象。
vue绑定事件后获取绑定事件中的this方法
10-18
本文将深入探讨如何在Vue事件绑定中获取`this`，以及如何使用`$event`传递参数。 首先，`this`在JavaScript中是一个非常关键的概念，它指的是当前上下文的对象。在Vue组件的方法中，`this`通常指向调用该方法的 Vue...
微信小程序实现传参数的几种方法示例
08-28
在微信小程序开发中，传递参数是一项基础且重要的任务。...理解并灵活运用这些方法，可以有效地解决微信小程序中参数传递的问题，提高开发效率。在实际开发中，还需要根据项目需求和业务逻辑选择合适的方法。
JQuery入门——用bind方法绑定事件处理函数应用介绍
10-27
`bind()`是jQuery中用于绑定事件处理函数的核心方法，对于初学者来说，掌握这个方法是理解jQuery事件处理的关键。 `bind()`方法的基本语法如标题和描述中所述：`bind(type, [data], fn)`。这里，`type`是一个或多个...
JavaScript给按钮绑定点击事件（onclick）的方法
10-24
事件委托是一种优化技术，通过在父元素上绑定事件监听器，而不是在每个子元素上单独绑定。当事件冒泡到父元素时，处理程序会被调用： ```javascript document.getElementById('parent').addEventListener('click', ...
Javascript中button按钮的onclick()事件传递参数
热门推荐
php菜鸟技术天地
06-17 4万+
function aaa(){  var u_id = '你的id值';  location.href = modifyUser.php？user=u_id } 方法二
html中button通过自定义属性传值
qq_42402381的博客
05-20 8670
<body> <button class="btn" onclick="chickMe(this)" data-name="张三" id="1" data-age="18">点击</button> <button class="btn2" onclick="chickMe(this)" data-name="李四" id="2" data...
点击按钮显示div并向div中传递参数
以秘
07-26 5251
 针对菜单显示的内容，点击每一个按钮后，需要显示详细信息，详情页是一个div,点击一行才会显示，显示的内容则是根据选中的按钮。 引申出来，比如一个订单列表，点击一行，则弹出一个div展示订单详情，而详情内容则是根据点击的那一行的内容来确定，于是需要传递参数。 实现效果如下： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;met...
python按钮调用函数_如何在Button的command中传递参数？
weixin_39560245的博客
11-24 4786
tkinter是Python官方自带的GUI框架，简单好用，其中最常用的恐怕就是Button控件了。这个控件就是在GUI上显示一个按钮，用户点击后，除法command参数所对应的函数。不过，这里有一个很多人都在咨询的问题，如何在Button控件的command中传递参数？错误的传参写法下面这段代码，希望实现的功能，是点击clickme按钮后，能够将tstr变量中的字符串在Label中显示出来。im...
vue绑定事件传递参数
09-11
在Vue中，可以通过以下几种方式来实现事件传递参数的绑定： 1. 使用匿名函数：可以在事件绑定中使用匿名函数，然后在函数中传递参数。例如： ```html <button @click="handleClick(param)">点击按钮</button> ``` ```javascript methods: { handleClick(param) { // 在这里处理点击事件，可以使用传递的参数 console.log(param); } } ``` 2. 使用$event对象：Vue会自动将原生事件对象$event作为参数传递给事件处理函数。例如： ```html <button @click="handleClick($event, param)">点击按钮</button> ``` ```javascript methods: { handleClick(event, param) { // 在这里处理点击事件，可以使用传递的参数和事件对象 console.log(param); console.log(event); } } ``` 3. 使用bind方法：可以使用bind方法来绑定事件处理函数并传递参数。例如： ```html <button @click="handleClick.bind(this, param)">点击按钮</button> ``` ```javascript methods: { handleClick(param) { // 在这里处理点击事件，可以使用传递的参数 console.log(param); } } ``` 无论使用哪种方式，都可以实现在Vue中绑定事件并传递参数。根据具体的场景和需求，选择最合适的方式即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值