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插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
jquery实现左右轮播切换效果
Jan 01 jQuery
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 jQuery
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 02 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邮件专题
2006/10/09 PHP
MySql 按时间段查询数据方法(实例说明)
2008/11/02 PHP
js动态为代码着色显示行号
2013/05/29 Javascript
jquery使用$(element).is()来判断获取的tagName
2014/08/24 Javascript
jquery表单验证需要做些什么
2015/11/17 Javascript
详解Bootstrap创建表单的三种格式(一)
2016/01/04 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
2016/08/05 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
2016/08/19 Javascript
bootstrap table小案例
2016/10/21 Javascript
js转换对象为xml
2017/02/17 Javascript
Nodejs 和 Electron ubuntu下快速安装过程
2018/05/04 NodeJs
如何在微信小程序中实现Mixins方案
2019/06/20 Javascript
js实现树形数据转成扁平数据的方法示例
2020/02/27 Javascript
Vue触发input选取文件点击事件操作
2020/08/07 Javascript
原生js实现表格循环滚动
2020/11/24 Javascript
Python中删除文件的程序代码
2011/03/13 Python
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
Win7下Python与Tensorflow-CPU版开发环境的安装与配置过程
2018/01/04 Python
python计算两个数的百分比方法
2018/06/29 Python
Python之两种模式的生产者消费者模型详解
2018/10/26 Python
浅谈numpy生成数组的零值问题
2018/11/12 Python
Python正则表达式和元字符详解
2018/11/29 Python
python中实现控制小数点位数的方法
2019/01/24 Python
python安装本地whl的实例步骤
2019/10/12 Python
在什么时候需要使用"常引用"
2015/12/31 面试题
Python面试题集
2012/03/08 面试题
室内设计专业学生的自我评价分享
2013/11/27 职场文书
护士自我评价
2014/02/01 职场文书
个人近期表现材料
2014/02/11 职场文书
文体活动实施方案
2014/03/27 职场文书
2014国庆65周年领导讲话稿(3篇)
2014/09/21 职场文书
教师个人师德工作总结2015
2015/05/12 职场文书
运动会新闻报道稿
2015/07/22 职场文书
保外就医申请书范文
2015/08/06 职场文书
八年级英语教学反思
2016/02/15 职场文书
你知道Java Spring的两种事务吗
2022/03/16 Java/Android