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 相关文章推荐
实现超用户体验 table排序javascript实现代码
Jun 22 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
Nov 17 Javascript
JavaScript中json使用自己总结
Aug 13 Javascript
JS获取几种URL地址的方法小结
Feb 26 Javascript
table insertRow、deleteRow定义和用法总结
May 14 Javascript
JavaScript实现同时调用多个函数的方法
Nov 09 Javascript
AngularJS教程之MVC体系结构详解
Aug 16 Javascript
JS验证图片格式和大小并预览的简单实例
Oct 11 Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
May 26 Javascript
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
vue实现分页组件
Jun 16 Javascript
Vue事件处理原理及过程详解
Mar 11 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个人网站架设连环讲(二)
2006/10/09 PHP
PHP过滤黑名单关键字的方法
2014/12/01 PHP
在Debian系统下配置LNMP的教程
2015/07/09 PHP
CodeIgniter辅助之第三方类库third_party用法分析
2016/01/20 PHP
详解WordPress中添加友情链接的方法
2016/05/21 PHP
[原创]php使用curl判断网页404(不存在)的方法
2016/06/23 PHP
解决PHP程序运行时:Fatal error: Maximum execution time of 30 seconds exceeded in的错误提示
2016/11/25 PHP
Yii 访问 Gii(脚手架)时出现 403 错误
2018/06/06 PHP
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
2010/12/11 Javascript
《JavaScript高级程序设计》阅读笔记(二) ECMAScript中的原始类型
2012/02/27 Javascript
JQuery记住用户名和密码的具体实现
2014/04/04 Javascript
IE下通过a实现location.href 获取referer的值
2014/09/04 Javascript
jquery插件unobtrusive实现片段式加载
2015/06/15 Javascript
jQuery 中ajax异步调用的四种方式
2016/06/28 Javascript
vue.js入门教程之计算属性
2016/09/01 Javascript
用JavaScript和jQuery实现瀑布流
2017/03/19 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
2017/09/11 Javascript
详解Nodejs mongoose
2018/06/10 NodeJs
详解Eslint 配置及规则说明
2018/09/10 Javascript
Element-ui tree组件自定义节点使用方法代码详解
2018/09/17 Javascript
python 捕获 shell/bash 脚本的输出结果实例
2017/01/04 Python
Zookeeper接口kazoo实例解析
2018/01/22 Python
用pandas按列合并两个文件的实例
2018/04/12 Python
python3监控CentOS磁盘空间脚本
2018/06/21 Python
python 读取更新中的log 或其它文本方式
2019/12/24 Python
python批量替换文件名中的共同字符实例
2020/03/05 Python
解决python虚拟环境切换无效的问题
2020/04/30 Python
Python3中小括号()、中括号[]、花括号{}的区别详解
2020/11/15 Python
CSS3实现超酷的黑猫警长首页
2016/04/26 HTML / CSS
CSS3只让背景图片旋转180度的实现示例
2021/03/09 HTML / CSS
html5使用canvas画三角形
2014/12/15 HTML / CSS
保险经纪人求职信
2014/03/11 职场文书
房屋转让协议书范本
2014/04/11 职场文书
职位说明书范文
2014/05/07 职场文书
幼师求职自荐信
2014/05/31 职场文书
考研英语辞职信
2015/05/13 职场文书