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 相关文章推荐
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
jQuery Validate 校验多个相同name的方法
May 18 jQuery
jquery.masonry瀑布流效果
May 25 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
jquery实现左右轮播切换效果
Jan 01 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
jquery实现轮播图特效
Apr 12 jQuery
jquery轮播图插件使用方法详解
Jul 31 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下的权限算法的实现
2007/04/28 PHP
thinkPHP3.2简单实现文件上传的方法
2016/05/16 PHP
yii2-GridView在开发中常用的功能及技巧总结
2017/01/07 PHP
php模仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(中)
2017/06/11 PHP
TP3.2批量上传文件或图片 同名冲突问题的解决方法
2017/08/01 PHP
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
jQuery Ajax之load()方法
2009/10/12 Javascript
JS页面延迟执行一些方法(整理)
2013/11/11 Javascript
JavaScript文档碎片操作实例分析
2015/12/12 Javascript
Wireshark基本介绍和学习TCP三次握手
2016/08/15 Javascript
Bootstrap轮播插件使用代码
2016/10/11 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
2017/07/04 Javascript
Vuejs中使用markdown服务器端渲染的示例
2017/11/22 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
2018/12/16 Javascript
vue实现的网易云音乐在线播放和下载功能案例
2019/02/18 Javascript
解决vue中的无限循环问题
2020/07/27 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
vue递归获取父元素的元素实例
2020/08/07 Javascript
vue 实现element-ui中的加载中状态
2020/11/11 Javascript
Python 文件操作技巧(File operation) 实例代码分析
2008/08/11 Python
python实现在sqlite动态创建表的方法
2015/05/08 Python
使用python在本地电脑上快速处理数据
2017/06/22 Python
python自动化脚本安装指定版本python环境详解
2017/09/14 Python
基于python+selenium的二次封装的实现
2020/01/06 Python
HTML5+css3:3D旋转木马效果相册
2017/01/03 HTML / CSS
海信商城:海信电视、科龙空调、容声冰箱官方专卖
2017/02/07 全球购物
贝斯特韦斯特酒店集团官网:Best Western
2019/01/03 全球购物
ShellScript面试题一则-ShellScript编程
2014/06/24 面试题
初一英语教学反思
2014/01/11 职场文书
音乐教学案例
2014/01/30 职场文书
部队万能检讨书
2014/02/20 职场文书
厨师长岗位职责
2014/03/02 职场文书
聘用意向书
2014/07/29 职场文书
2016年五一国际劳动节活动总结
2016/04/06 职场文书
HTML+VUE分页实现炫酷物联网大屏功能
2021/05/27 Vue.js
详解Python内置模块Collections
2022/03/22 Python