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插件之validation插件
Mar 29 jQuery
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
利用jQuery解析获取JSON数据
Apr 08 jQuery
jQuery树插件zTree使用方法详解
May 02 jQuery
jQuery手风琴的简单制作
May 12 jQuery
jquery对table做排序操作的实例演示
Aug 10 jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
jQuery解析json格式数据示例
Sep 01 jQuery
详解jQuery如何实现模糊搜索
May 10 jQuery
jquery.pager.js分页实现详解
Jul 29 jQuery
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
jQuery实现图片切换效果
Oct 19 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出现Cannot modify header information问题的解决方法大全
2008/04/09 PHP
判断Keep-Alive模式的HTTP请求的结束的实现代码
2011/08/06 PHP
解析smarty 截取字符串函数 truncate的用法介绍
2013/06/20 PHP
PHPMailer发送HTML内容、带附件的邮件实例
2014/07/01 PHP
PHP基于MySQL数据库实现对象持久层的方法
2015/06/17 PHP
WordPress特定文章对搜索引擎隐藏或只允许搜索引擎查看
2015/12/31 PHP
PHP文件上传、客户端和服务器端加限制、抓取错误信息、完整步骤解析
2017/01/12 PHP
PHP实现阿里大鱼短信验证的实例代码
2017/07/10 PHP
PHP并发查询MySQL的实例代码
2017/08/09 PHP
select组合框option的捕捉实例代码
2008/09/30 Javascript
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
2010/09/12 Javascript
seajs中模块的解析规则详解和模块使用总结
2014/03/12 Javascript
Jquery自定义button按钮的几种方法
2014/06/11 Javascript
jQuery unbind()方法实例详解
2016/01/19 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
2016/08/29 Javascript
Vuejs实现购物车功能
2017/11/05 Javascript
JS倒计时两种实现方式代码实例
2020/07/27 Javascript
Python字符编码判断方法分析
2016/07/01 Python
Django CBV与FBV原理及实例详解
2019/08/12 Python
基于TensorFlow常量、序列以及随机值生成实例
2020/01/04 Python
python 控制台单行刷新,多行刷新实例
2020/02/19 Python
python编程进阶之类和对象用法实例分析
2020/02/21 Python
python shell命令行中import多层目录下的模块操作
2020/03/09 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
详解html5 shiv.js和respond.min.js
2018/01/24 HTML / CSS
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
2019/07/09 HTML / CSS
鱼油专家:Omegavia
2016/10/10 全球购物
欧尚俄罗斯网上超市:Auchan俄罗斯
2018/05/03 全球购物
英国川宁茶官方网站:Twinings茶
2019/05/21 全球购物
如何向接受结构参数的函数传入常数值
2016/02/17 面试题
上班迟到检讨书300字
2014/10/18 职场文书
2014年计划生育工作总结
2014/11/14 职场文书
中学教师师德师风承诺书
2015/04/28 职场文书
幼儿园新生开学寄语
2015/05/27 职场文书
学校食堂管理制度
2015/08/04 职场文书
纯 CSS 自定义多行省略的问题(从原理到实现)
2021/11/11 HTML / CSS