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简单绑定单个事件的方法示例
Jun 10 jQuery
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
jQuery轻量级表单模型验证插件
Oct 15 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 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
PHP5.0正式发布 不完全兼容PHP4 新增多项功能
2006/10/09 PHP
php读取30天之内的根据算法排序的代码
2008/04/06 PHP
通过table标签,PHP输出EXCEL的实现方法
2013/07/24 PHP
PHP使用imagick读取PDF生成png缩略图的两种方法
2014/03/20 PHP
php实现转换ubb代码的方法
2015/06/18 PHP
详解PHP对数组的定义以及数组的创建方法
2015/11/27 PHP
PHP mysql事务问题实例分析
2016/01/18 PHP
php中try catch捕获异常实例详解
2020/08/06 PHP
js AspxButton的客户端操作
2009/06/26 Javascript
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
2009/12/04 Javascript
filters.revealTrans.Transition使用方法小结
2010/08/19 Javascript
在VS2008中使用jQuery智能感应的方法
2010/12/30 Javascript
不使用浏览器运行javascript代码的方法
2013/07/24 Javascript
Jquery $when done then的用法详解
2016/05/20 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
2016/07/20 Javascript
jQuery实现边框动态效果的实例代码
2016/09/23 Javascript
微信小程序 倒计时组件实现代码
2016/10/24 Javascript
微信小程序中单位rpx和rem的使用
2016/12/06 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
2016/12/08 Javascript
BootStrap轮播HTML代码(推荐)
2016/12/10 Javascript
JS控件bootstrap suggest plugin使用方法详解
2017/03/25 Javascript
JS+jQuery实现注册信息的验证功能
2017/09/26 jQuery
Vue2实时监听表单变化的示例讲解
2018/08/30 Javascript
微信小程序wxs实现吸顶效果
2020/01/08 Javascript
有关wxpython pyqt内存占用问题分析
2014/06/09 Python
深度定制Python的Flask框架开发环境的一些技巧总结
2016/07/12 Python
python微信跳一跳系列之自动计算跳一跳距离
2018/02/26 Python
python中文编码与json中文输出问题详解
2018/08/24 Python
对Python协程之异步同步的区别详解
2019/02/19 Python
使用 python pyautogui实现鼠标键盘控制功能
2019/08/04 Python
利用python中集合的唯一性实现去重
2020/02/11 Python
python实现从ftp服务器下载文件
2020/03/03 Python
加拿大在线隐形眼镜专家:PerfectLens.ca
2016/11/19 全球购物
工艺技术员岗位职责
2015/02/04 职场文书
护士先进个人总结
2015/02/13 职场文书
趣味运动会简讯
2015/07/20 职场文书