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实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
jquery仿微信聊天界面
May 06 jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
jQuery带控制按钮轮播图插件
Jul 31 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 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
使用WordPress发送电子邮件的相关PHP函数用法解析
2015/12/15 PHP
PHP实现仿百度文库,豆丁在线文档效果(word,excel,ppt转flash)
2016/03/10 PHP
php curl发送请求实例方法
2019/08/01 PHP
jQuery中需要注意的细节问题小结
2011/12/06 Javascript
优化javascript的执行效率一些方法总结
2013/12/25 Javascript
删除Javascript Object中间的key
2014/11/18 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
2015/05/06 Javascript
动态加载JavaScript文件的两种方法
2016/04/22 Javascript
聊一聊JavaScript作用域和作用域链
2016/05/03 Javascript
浅谈javascript中new操作符的原理
2016/06/07 Javascript
JS中常用的输出方式(五种)
2016/06/12 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
2016/09/08 Javascript
angular 动态组件类型详解(四种组件类型)
2017/02/22 Javascript
微信小程序与php 实现微信支付的简单实例
2017/06/23 Javascript
详解Angular6学习笔记之主从组件
2018/09/05 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
2019/05/03 Javascript
React Native 混合开发多入口加载方式详解
2019/09/23 Javascript
jQuery实现轮播图效果
2019/11/26 jQuery
[01:37]DOTA2超级联赛专访ChuaN 传奇般的电竞之路
2013/06/19 DOTA
[45:14]Optic vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
[01:04:02]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第二场 1月24日
2021/03/11 DOTA
python中cPickle类使用方法详解
2018/08/27 Python
PyCharm 2019.3发布增加了新功能一览
2019/12/08 Python
opencv-python 读取图像并转换颜色空间实例
2019/12/09 Python
Python @property装饰器原理解析
2020/01/22 Python
opencv+python实现均值滤波
2020/02/19 Python
Django与pyecharts结合的实例代码
2020/05/13 Python
浅析Python 条件控制语句
2020/07/15 Python
pycharm-professional-2020.1下载与激活的教程
2020/09/21 Python
django项目中使用云片网发送短信验证码的实现
2021/01/19 Python
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
2016/03/14 HTML / CSS
Canvas在超级玛丽游戏中的应用详解
2021/02/06 HTML / CSS
光棍节联谊晚会活动策划书
2014/10/10 职场文书
先进教师个人事迹材料
2014/12/15 职场文书
《我们的民族小学》教学反思
2016/02/19 职场文书
SQL注入详解及防范方法
2021/12/06 MySQL