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遍历节点方法汇总(推荐)
May 13 jQuery
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
jQuery实现checkbox的简单操作
Nov 18 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
js/jQuery实现全选效果
Jun 17 jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
jQuery轮播图功能制作方法详解
Dec 03 jQuery
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
jQuery列表动态增加和删除的实现方法
Nov 05 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
改造一台复古桌面收音机
2021/03/02 无线电
一个很方便的 XML 类!!原创的噢
2006/10/09 PHP
php 数组排序 array_multisort与uasort的区别
2011/03/24 PHP
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
php封装json通信接口详解及实例
2017/03/07 PHP
Jquery截取中文字符串的实现代码
2010/12/22 Javascript
让浏览器非阻塞加载javascript的几种方法小结
2011/04/25 Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
2013/03/29 Javascript
JavaScript对象反射用法实例
2015/04/17 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
2016/06/24 Javascript
JS原型与原型链的深入理解
2017/02/15 Javascript
windows系统下更新nodejs版本的方案
2017/11/24 NodeJs
微信小程序使用form表单获取输入框数据的实例代码
2018/05/17 Javascript
js中关于Blob对象的介绍与使用
2019/11/29 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
2020/07/07 Javascript
vue实现移动端拖动排序
2020/08/21 Javascript
JavaScript ES 模块的使用
2020/11/12 Javascript
[01:09]DOTA2次级职业联赛 - 99战队宣传片
2014/12/01 DOTA
python Crypto模块的安装与使用方法
2017/12/21 Python
python中copy()与deepcopy()的区别小结
2018/08/03 Python
python3实现表白神器
2019/04/09 Python
梅尔倒谱系数(MFCC)实现
2019/06/19 Python
python函数的作用域及关键字详解
2019/08/20 Python
python 三元运算符使用解析
2019/09/16 Python
基于python实现判断字符串是否数字算法
2020/07/10 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
使用phonegap操作数据库的实现方法
2017/03/31 HTML / CSS
如何估计一张表的大小(假设该表中有1万条数据)
2016/03/27 面试题
解释下面关于J2EE的名词
2013/11/15 面试题
门卫工作岗位职责
2013/12/17 职场文书
自我鉴定 电子商务专业
2014/01/30 职场文书
人力资源部门的主要职能
2014/02/22 职场文书
教师党员学习群众路线心得体会
2014/11/04 职场文书
公司财务管理制度
2015/08/04 职场文书
社区志愿者服务心得体会
2016/01/22 职场文书
R9700摩机记
2022/04/05 无线电