jQuery中的on与bind绑定事件区别实例详解


Posted in Javascript onFebruary 28, 2017

on(events,[selector],[data],fn)

  • events:一个或多个用空格分隔的事件类型和可选的命名空间,如”click”或”keydown.myPlugin” 。
  • selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代.
  • data:当一个事件被触发时要传递event.data给事件处理函数。
  • fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false。
  • bind(type,[data],fn)
  • 为每个匹配元素的特定事件绑定事件处理函数。
  • jQuery 3.0中已弃用此方法,请用 on()代替。
  • 参数类型跟前面那个on一样.

bind与on的区别就在于?事件冒泡

demo1:

## 点击相应的li弹出里面内容,这里把on换成bind是一样的没有区别.也就是说on不使用selector属性与bind并无区别   

<ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
</ul>
<script>
 $(function () {
  $('ul li').on('click',function(){
   alert($(this).text())
  }); 
 })
</script>

demo2:

<script>
 // 这种情况你会发现点击第四个不具备事件.也就是不具备动态绑定事件能力
 $(function () {
  $('ul li').bind('click',function(){
   alert($(this).text())
  }); 
  var ok = $('<li>4</li>');
  $('ul').last().append(ok);

 })
</script>

demo3

<script>
 // 换成on的写法,添加selector属性,就是通过事件冒泡,进行了事件委托,把li的事件委托给其父元素,点击后面加入的li就默认绑定了事件
 $(function () {
  $('ul').on('click','li',function(){
   alert($(this).text())
  }); 
  var ok = $('<li>4</li>');
  $('ul').last().append(ok);
 })
</script>

事件委托的好处

  • 万一子元素非常多,给每个子元素都添加一个事件,会影响到性能;
  • 为动态添加的元素也能绑上指定事件;

以上所述是小编给大家介绍的jQuery中的on与bind绑定事件区别实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript中暂停功能的实现代码
Mar 04 Javascript
5个最佳的Javascript日期处理类库分享
Apr 15 Javascript
JavaScript 中的日期和时间及表示标准介绍
Aug 21 Javascript
js统计页面的来访次数实现代码
May 09 Javascript
使用jQuery将多条数据插入模态框的实现代码
Oct 08 Javascript
javascript中数组方法汇总
Jul 07 Javascript
jQuery实现的placeholder效果完整实例
Aug 02 Javascript
简单的js计算器实现
Oct 26 Javascript
JS实现微信弹出搜索框 多条件查询功能
Dec 13 Javascript
BootStrap daterangepicker 双日历控件
Jun 02 Javascript
基于react后端渲染模板引擎noox发布使用
Jan 11 Javascript
浅谈Angular7 项目开发总结
Dec 19 Javascript
利用angularjs1.4制作的简易滑动门效果
Feb 28 #Javascript
js 转义字符及URI编码详解
Feb 28 #Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
Feb 28 #Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
Feb 28 #Javascript
原生js仿淘宝网商品放大镜效果
Feb 28 #Javascript
原生js实现可拖拽效果
Feb 28 #Javascript
javascript 面向对象function详解及实例代码
Feb 28 #Javascript
You might like
php 传值赋值与引用赋值的区别
2010/12/29 PHP
php一些错误处理的方法与技巧总结
2013/08/10 PHP
利用PHP fsockopen 模拟POST/GET传送数据的方法
2015/09/22 PHP
PHP实现的简单留言板功能示例【基于thinkPHP框架】
2018/12/07 PHP
点击广告后才能获得下载地址
2006/10/26 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
2013/04/01 Javascript
js中复制行和删除行的操作实例
2013/06/25 Javascript
js获取时间并实现字符串和时间戳之间的转换
2015/01/05 Javascript
js数字计算 误差问题的快速解决方法
2017/02/28 Javascript
layui表单提交到后台自动封装到实体类的方法
2019/09/12 Javascript
微信小程序和H5页面间相互跳转代码实例
2019/09/19 Javascript
微信小程序实现底部弹出模态框
2020/11/18 Javascript
Python实现partial改变方法默认参数
2014/08/18 Python
Python的Flask框架应用程序实现使用QQ账号登录的方法
2016/06/07 Python
Python打包可执行文件的方法详解
2016/09/19 Python
Linux-ubuntu16.04 Python3.5配置OpenCV3.2的方法
2018/04/02 Python
使用python serial 获取所有的串口名称的实例
2019/07/02 Python
Win10下Python3.7.3安装教程图解
2019/07/08 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
python字符串替换re.sub()方法解析
2019/09/18 Python
小白教你PyCharm从下载到安装再到科学使用PyCharm2020最新激活码
2020/09/25 Python
Pycharm添加虚拟解释器报错问题解决方案
2020/10/13 Python
Nicole Miller官方网站:纽约女装品牌
2019/09/14 全球购物
Gretna Green中文官网:苏格兰格林小镇
2019/10/16 全球购物
澳大利亚有机化妆品网上商店:The Well Store
2020/02/20 全球购物
绩效管理实施方案
2014/03/19 职场文书
公务员爱岗敬业演讲稿
2014/08/26 职场文书
护理见习报告范文
2014/11/03 职场文书
2014年小学班主任工作总结
2014/11/08 职场文书
2014年建筑工程工作总结
2014/12/03 职场文书
面试通知短信
2015/04/20 职场文书
英语投诉信范文
2015/07/03 职场文书
公司食堂管理制度
2015/08/05 职场文书
市级三好生竞选稿
2015/11/21 职场文书
如果用一句诗总结你的上半年,你会用哪句呢?
2019/07/16 职场文书
MySQL 常见的数据表设计误区汇总
2021/06/07 MySQL