jquery绑定事件 bind和on的用法与区别分析


Posted in jQuery onMay 22, 2020

本文实例讲述了jquery绑定事件 bind和on的用法与区别。分享给大家供大家参考,具体如下:

bind和on都是给元素绑定事件用的,其最大的区别就是事件冒泡

事件冒泡也是委托事件的原型,事件委托就是子类的事情委托给父类的去做

最直观的区别就是on绑定比bind绑定多一个参数'childSelector'

语法

$(selector).on(event,childSelector,data,function)

参数 描述
event 必需。规定要从被选元素移除的一个或多个事件或命名空间。 由空格分隔多个事件值,也可以是数组。必须是有效的事件。
childSelector 可选。规定只能添加到指定的子元素上的事件处理程序(且不是选择器本身,比如已废弃的 delegate() 方法)。
data 可选。规定传递到函数的额外数据。
function 可选。规定当事件发生时运行的函数。

$(selector).bind(event,data,function,map)

参数 描述
event 必需。规定添加到元素的一个或多个事件。 由空格分隔多个事件值。必须是有效的事件。
data 可选。规定传递到函数的额外数据。
function 必需。规定当事件发生时运行的函数。
map 规定事件映射 ({event:function, event:function, ...}),包含要添加到元素的一个或多个事件,以及当事件发生时运行的函数。
  • bind只能给符合条件的元素本身添加事件
  • on可以将子元素的事件委托给父元素进行处理,而且可以给动态添加的元素加上绑定事件

也就是对于新添加的元素如果是on绑定,符合条件的新元素也会绑定事件,

如果是bind则不影响新元素

比如下例:

<ul>
  <li>第一个子元素<li/>
  <li>第二个子元素<li/>
  <li>第三个子元素<li/>
</ul>

我们想给所有li添加click事件,可以用on:

$('ul').on('click','li', function () {
    console.log($(this).text());
});

也可以用bind:

$('ul li').bind('click', function () {
    console.log($(this).text());
});

有什么区别呢?

第一用on绑定实际上是委托给了父级ul,也就是只给 一个元素绑定了事件

第二个是用选择器选择了ul下的所有li元素 依次绑定了事件

假如有很多很多子元素区别就很大了, bind会严重影响性能!

假如这时候新添一个li:

$('ul').append('<li>第四个子元素<li>');
  • 如果是on绑定则这个li也会有点击事件
  • 如果是bind则没有

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
如何在vue 中引入使用jquery
Nov 10 jQuery
jQuery实现电梯导航模块
Dec 22 jQuery
jQuery实现移动端笔触canvas电子签名
May 21 #jQuery
jQuery HTML获取内容和属性操作实例分析
May 20 #jQuery
jQuery HTML设置内容和属性操作实例分析
May 20 #jQuery
jquery html添加元素/删除元素操作实例详解
May 20 #jQuery
jQuery HTML css()方法与css类实例详解
May 20 #jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 #jQuery
jQuery 淡入/淡出效果函数用法分析
May 19 #jQuery
You might like
php中模拟POST传递数据的两种方法分享
2011/09/16 PHP
PHP Global变量定义当前页面的全局变量实现探讨
2013/06/05 PHP
使用PHP备份MYSQL数据的多种方法
2014/01/15 PHP
使用php的HTTP请求的库Requests实现美女图片墙
2015/02/22 PHP
解析 thinkphp 框架中的部分方法
2017/05/07 PHP
js控制div及网页相关属性的代码
2009/12/19 Javascript
jquery右下角弹出提示框示例代码
2013/10/08 Javascript
js 跳出页面的frameset框架示例介绍
2013/12/23 Javascript
理解JS事件循环
2016/01/07 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
2016/09/14 Javascript
JS经典正则表达式笔试题汇总
2016/12/15 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
2017/02/27 Javascript
react-native-fs实现文件下载、文本存储的示例代码
2017/09/22 Javascript
浅析从vue源码看观察者模式
2018/01/29 Javascript
Node.js利用console输出日志文件的方法示例
2018/04/27 Javascript
jquery 动态遍历select 赋值的实例
2018/09/12 jQuery
JSON.stringify()方法讲解
2019/01/31 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
2019/02/20 Javascript
[55:44]完美世界DOTA2联赛决赛 FTD vs Phoenix 第二场 11.08
2020/11/11 DOTA
Python实现PS滤镜的万花筒效果示例
2018/01/23 Python
如何在Django配置文件里配置session链接
2019/08/06 Python
Python API自动化框架总结
2019/11/12 Python
Pytorch之finetune使用详解
2020/01/18 Python
详解python方法之绑定方法与非绑定方法
2020/08/17 Python
Python实现自动签到脚本功能
2020/08/20 Python
Python脚本打包成可执行文件过程解析
2020/10/20 Python
Python3 用matplotlib绘制sigmoid函数的案例
2020/12/11 Python
python实现代码审查自动回复消息
2021/02/01 Python
欧洲最大的预定车位市场:JustPark
2020/01/06 全球购物
梅西百货官网:Macy’s
2020/08/04 全球购物
金讯Java笔试题目
2013/06/18 面试题
阅兵口号
2014/06/19 职场文书
幼儿园教师师德师风演讲稿:爱我所爱 无悔青春
2014/09/10 职场文书
辩护意见书
2015/06/04 职场文书
Java Spring Lifecycle的使用
2022/05/06 Java/Android
Mysql数据库group by原理详解
2022/07/07 MySQL