jQuery绑定点击事件和改变事件的几种方式以及多个元素绑定多个事件

简单的html页面：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jquery绑定点击事件</title><!-- 引入jquery --><script src="https://code.jquery.com/jquery-3.5.1.min.js"></script><script type="text/javascript">// 等待页面加载结束$(document).ready(function(){//此处写jquery});</script>
</head>
<body><form>姓名：<input type="text" id="name_input" value="" /><br/>年龄：<select id="age_sel"><option>18</option><option>19</option><option>20</option><option>21</option></select><br/><input type="submit" id="sub_click" value="点击提交" /></form>
</body>
</html>

1. 绑定click点击事件的几种方式：

click事件绑定：

$("#sub_click").click(function(){var name = $("#name_input").val();alert(name);
});

使用bind()函数绑定click：

 $("#sub_click").bind("click",function(){var name = $("#name_input").val();alert(name);});

使用on()函数绑定click：

 $("#sub_click").on("click",function(){var name = $("#name_input").val();alert(name);});

2. 绑定监听改变事件的几种方式：

change事件绑定：

$("#age_sel").change(function(){var age = $("#age_sel").val();alert(age);
});

使用bind()函数绑定click：

$("#age_sel").bind("change",function(){var age = $("#age_sel").val();alert(age);
});

使用on()函数绑定click：

$("#age_sel").on("change",function(){var age = $("#age_sel").val();alert(age);
});

3. 多个事件绑定多个元素（与上方html演示页面不关联）：

多个元素绑定多个事件：

//这里的元素与事件是一一对应的，元素a与click事件对应，元素b与change事件对应
//元素a不能触发change事件，同理元素b不能触发click事件
$("#a,#b").on("click,change",function(){//事件操作
});

注：
bind()的用法：

$("a").bind("click",[data],function(){})

其事件的绑定者是固定的，就是a，第一个参数是事件，第二个参数可选，是要传递给回调函数的event.data参数，第三个参数是回调函数。

on()的用法：

$("body").on("click",'a',[data],function(){})

相比于bind()，除了事件的绑定者（on事件的是body），在on的参数中还增加了一个选择器a，而事件将作用于这个a上面。

区别：
正是由于on()函数的参数中多出了一个选择a，因此我们可以为动态生成的元素也绑定事件，这是bind()函数做不到的。

jQuery绑定点击事件和改变事件的几种方式以及多个元素绑定多个事件相关推荐

html中加减号怎么输入,jQuery 实现点击加减号改变input标签中的value值,该怎么解决...
jQuery 实现点击加减号改变input标签中的value值我想点击左右两边的加减号,让中间input标签中的value属性值做出相应的改变,jQuery怎么实现? ------解决思路 ...
大数据正在改变客户服务的五种方式
大数据正在改变客户服务的五种方式任何组织的命脉,无论是否面向服务,都是需要为客户提供良好的服务.组织如何与其客户进行互动,会影响他们如何看待组织,这会影响潜在客户,除了组织最忠实的客户之外. 客户服 ...
ai物流智能调度效率对比_人工智能在物流中：人工智能改变物流的5种方式
ai物流智能调度效率对比 A man who has been sleeping for twenty years and woke up in 2020 would find himself in ...
用jQuery做点击下箭头改变方向
先上一张图,效果就是要求点击下箭头,变成上箭头,再点击恢复原状,其实做这个并不难,但需要注意的是,如果设置全局变量flag,当同时点开多个条目,箭头方向就会失常.所以要给每个img图片上设置一个自定义 ...
人工智能改变生活的 10 种方式
简介: 人类在历史中已走过了漫漫长路,而当下的技术进步加快了人类前进的步伐,让每个人的生活都变得更加便捷. 更多技术内容:点击这里人类在历史中已走过了漫漫长路,而当下的技术进步加快了人类前进的步伐 ...
unity改变物体大小的两种方式
本文探讨了两种改变物体大小的方法,一种是通过transform.localscale,另一种是通过改变mesh的顶点坐标.第一种方式并没有真正改变物体大小,只是对物体进行了缩放,物理属性并没有改变.因 ...
class绑定多个值 vue_vue动态绑定class的几种方式
vue动态绑定class的几种方式对象方法: 1.简单绑定:(这里的active加不加单引号,都可以解析,不过最好还是加上,避免不必要的错误) 绑定并判断一个:class="{test: ...
Android studio中TextView改变字体的两种方式（如仿宋、隶书）
在Android中系统默认的字体有三种,通过在TextView中加上android:typeface="sans"来改变,而sans就是三种当中的其中的一种,还有两种分别是&quo ...
devsecops_DevSecOps改变安全性的5种方式
devsecops 关于是否需要扩展DevOps以显式引入安全性的争论一直在持续. 归根结底 , DevOps一直是使用新工具(通常是开源)并建立在更具协作性的文化基础上的一系列新实践的简写形式. 为 ...

jQuery绑定点击事件和改变事件的几种方式以及多个元素绑定多个事件

jQuery绑定点击事件和改变事件的几种方式以及多个元素绑定多个事件

1. 绑定click点击事件的几种方式：

2. 绑定监听改变事件的几种方式：

3. 多个事件绑定多个元素（与上方html演示页面不关联）：

jQuery绑定点击事件和改变事件的几种方式以及多个元素绑定多个事件相关推荐

最新文章

热门文章