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实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
jQuery tip提示插件(实例分享)
Apr 28 jQuery
jquery实现提示语淡入效果
May 05 jQuery
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
详解jQuery-each()方法
Mar 13 jQuery
浅谈JS和jQuery的区别
Mar 27 jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
jQuery实现图片下载代码
Jul 18 jQuery
深入分析jQuery.one() 函数
Jun 03 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知道与问问的采集插件代码
2010/10/12 PHP
PHPMailer使用教程(PHPMailer发送邮件实例分析)
2012/12/06 PHP
PHP实现数据四舍五入的方法小结【4种方法】
2019/03/27 PHP
超清晰的document对象详解
2007/02/27 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
2011/08/23 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
2014/04/12 Javascript
基于socket.io和node.js搭建即时通信系统
2014/07/30 Javascript
node.js中的fs.chmodSync方法使用说明
2014/12/18 Javascript
Javascript中With语句用法实例
2015/05/14 Javascript
详谈Node.js之操作文件系统
2017/08/29 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
2018/04/26 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
2018/08/16 Javascript
vue如何实现自定义底部菜单栏
2019/07/01 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
2020/11/27 Vue.js
[49:11]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.20
2020/12/23 DOTA
[49:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第二场 3月4日
2021/03/11 DOTA
python检测某个变量是否有定义的方法
2015/05/20 Python
django接入新浪微博OAuth的方法
2015/06/29 Python
Python实现代码统计工具(终极篇)
2016/07/04 Python
Python网络编程详解
2017/10/31 Python
在PyCharm环境中使用Jupyter Notebook的两种方法总结
2018/05/24 Python
在pandas多重索引multiIndex中选定指定索引的行方法
2018/11/16 Python
python实现图书借阅系统
2019/02/20 Python
使用 Python 玩转 GitHub 的贡献板(推荐)
2019/04/04 Python
Python偏函数Partial function使用方法实例详解
2020/06/17 Python
python上下文管理的使用场景实例讲解
2021/03/03 Python
GNC健安喜美国官网:美国第一营养品牌
2016/07/22 全球购物
什么是数据库锁?Oracle中都有哪些类型的锁?
2015/08/21 面试题
大学生个人推荐信范文
2013/11/25 职场文书
成品仓管员岗位职责
2013/12/11 职场文书
现场施工员岗位职责
2014/03/10 职场文书
2014年大学生四年规划书范文
2014/04/03 职场文书
领导班子四风查摆对照检查材料思想汇报
2014/10/05 职场文书
楚门的世界观后感
2015/06/03 职场文书
来探秘“德国中小企业”的成功之道
2019/07/26 职场文书
德劲DE1105机评
2022/04/05 无线电