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 相关文章推荐
Locate a File Using a File Open Dialog Box
Jun 18 Javascript
精通Javascript系列之数据类型 字符串
Jun 08 Javascript
JavaScript下通过的XMLHttpRequest发送请求的代码
Jun 28 Javascript
javascript中直接引用Microsoft的COM生成Word
Jan 20 Javascript
javascript作用域和闭包使用详解
Apr 25 Javascript
JS实现的在线调色板实例(附demo源码下载)
Mar 01 Javascript
ReactNative-JS 调用原生方法实例代码
Oct 08 Javascript
JS限制条件补全问题实例分析
Dec 16 Javascript
node.js支持多用户web终端实现及安全方案
Nov 29 Javascript
React Native中NavigatorIOS组件的简单使用详解
Jan 27 Javascript
Vue中的作用域CSS和CSS模块的区别
Oct 09 Javascript
浅谈vuex中store的命名空间
Nov 08 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 urlencode()与urldecode()函数字符编码原理详解
2011/12/06 PHP
php通过记录IP来防止表单重复提交方法分析
2014/12/16 PHP
PHP下载远程图片并保存到本地方法总结
2016/01/22 PHP
关于php几种字符串连接的效率比较(详解)
2017/02/22 PHP
Hutia 的 JS 代码集
2006/10/24 Javascript
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
jquery 单引号和双引号的区别及使用注意
2013/07/31 Javascript
Javascript全局变量var与不var的区别深入解析
2013/12/09 Javascript
轻松实现javascript数据双向绑定
2015/11/11 Javascript
JS动态给对象添加事件的简单方法
2016/07/19 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
2016/12/19 Javascript
JavaScript实现精美个性导航栏筋斗云效果
2017/10/29 Javascript
Vue中$refs的用法详解
2018/06/24 Javascript
写gulp遇到的ES6问题详解
2018/12/03 Javascript
NodeJs 模仿SIP话机注册的方法
2019/06/21 NodeJs
Android 自定义view仿微信相机单击拍照长按录视频按钮
2019/07/19 Javascript
JS简易计算器实例讲解
2020/06/30 Javascript
浅谈JS for循环中使用break和continue的区别
2020/07/21 Javascript
python连接mysql数据库示例(做增删改操作)
2013/12/31 Python
手把手教你python实现SVM算法
2017/12/27 Python
PyCharm 设置SciView工具窗口的方法
2019/01/15 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
Python制作exe文件简单流程
2019/01/24 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
浅析PyTorch中nn.Linear的使用
2019/08/18 Python
django框架中ajax的使用及避开CSRF 验证的方式详解
2019/12/11 Python
python使用python-pptx删除ppt某页实例
2020/02/14 Python
解决Python import .pyd 可能遇到路径的问题
2021/03/04 Python
AmazeUI 列表的实现示例
2020/08/17 HTML / CSS
澳大利高级泳装品牌:Bondi Born
2018/05/23 全球购物
英语翻译系毕业生求职信
2013/09/29 职场文书
小组名称和口号
2014/06/09 职场文书
高中生打架检讨书1000字
2015/02/17 职场文书
幼儿园园务工作总结2015
2015/05/18 职场文书
为什么MySQL分页用limit会越来越慢
2021/07/25 MySQL
Python3.10的一些新特性原理分析
2021/09/15 Python