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 相关文章推荐
jQuery学习3:操作元素属性和特性
Feb 07 Javascript
理解Javascript_10_对象模型
Oct 16 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Jun 05 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
Dec 24 Javascript
JavaScript中数组去除重复的三种方法
Apr 22 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
Nov 07 Javascript
基于javascript实现按圆形排列DIV元素(三)
Dec 02 Javascript
vue2 前后端分离项目ajax跨域session问题解决方法
Apr 27 Javascript
vue 动态修改a标签的样式的方法
Jan 18 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
Aug 29 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
Apr 12 Javascript
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
利用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
PHP5中虚函数的实现方法分享
2011/04/20 PHP
深入PHP内存相关的功能特性详解
2013/06/08 PHP
微信小程序 消息推送php服务器验证实例详解
2017/03/30 PHP
PHP编程实现阳历转换为阴历的方法实例
2017/08/08 PHP
php实现每日签到功能
2018/11/29 PHP
php连接mysql之mysql_connect()与mysqli_connect()的区别
2020/07/19 PHP
js验证是否为数字的总结
2013/04/14 Javascript
jQuery替换字符串(实例代码)
2013/11/13 Javascript
使用jQuery重置(reset)表单的方法
2014/05/05 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
2015/02/23 Javascript
javascript跑马灯抽奖实例讲解
2020/04/17 Javascript
如何消除inline-block属性带来的标签间间隙
2016/03/31 Javascript
JavaScript模仿Pinterest实现图片预加载功能
2016/10/25 Javascript
js通过classname来获取元素的方法
2016/11/24 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
2017/03/21 Javascript
ReactJs设置css样式的方法
2017/06/08 Javascript
Vue开发之watch监听数组、对象、变量操作分析
2019/04/25 Javascript
JavaScript正则表达式验证登录实例
2020/03/18 Javascript
[01:11:27]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Optic
2018/04/03 DOTA
python脚本设置系统时间的两种方法
2016/02/21 Python
python 打印出所有的对象/模块的属性(实例代码)
2016/09/11 Python
利用python实现简单的循环购物车功能示例代码
2017/07/05 Python
20个常用Python运维库和模块
2018/02/12 Python
Python 绘制酷炫的三维图步骤详解
2019/07/12 Python
python cv2在验证码识别中应用实例解析
2019/12/25 Python
pip 20.3 新版本发布!即将抛弃 Python 2.x(推荐)
2020/12/16 Python
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
2018/03/02 HTML / CSS
欧舒丹英国官网:购买欧舒丹护手霜等明星产品
2017/01/17 全球购物
.NET概念性的面试题
2012/02/29 面试题
工作交流会欢迎词
2014/01/12 职场文书
追悼会主持词
2014/03/20 职场文书
技术比武方案
2014/05/19 职场文书
2014年安全生产责任书
2014/07/22 职场文书
2014年圣诞节寄语
2014/12/08 职场文书
工作服管理制度范本
2015/08/06 职场文书
人力资源部工作计划
2019/05/14 职场文书