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 相关文章推荐
List Information About the Binary Files Used by an Application
Jun 11 Javascript
jquery 多行文本框(textarea)高度变化
Jul 03 Javascript
Javascript中call的两种用法实例
Dec 13 Javascript
js使用正则实现ReplaceAll全部替换的方法
Jul 18 Javascript
jQuery中detach()方法用法实例
Dec 25 Javascript
原生js实现移动端瀑布流式代码示例
Dec 18 Javascript
快速解决js中window.location.href不工作的问题
Nov 02 Javascript
微信小程序之拖拽排序(代码分享)
Jan 21 Javascript
Vue不能检测到Object/Array更新的情况的解决
Jun 26 Javascript
vue中使用protobuf的过程记录
Oct 26 Javascript
搭建基于express框架运行环境的方法步骤
Nov 15 Javascript
vue移动端写的拖拽功能示例代码
Sep 09 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中养成7个面向对象的好习惯
2010/07/17 PHP
thinkphp5框架扩展redis类方法示例
2019/05/06 PHP
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
2013/11/25 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
2014/03/05 Javascript
jQuery中:contains选择器用法实例
2014/12/30 Javascript
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
jQuery给指定的table动态添加删除行的操作方法
2016/10/12 Javascript
Bootstrap选项卡学习笔记分享
2017/02/13 Javascript
AngularJS之自定义服务详解(factory、service、provider)
2017/04/14 Javascript
详谈js模块化规范
2017/07/07 Javascript
jQuery中.attr()和.data()的区别分析
2017/09/03 jQuery
js 只比较时间大小的实例
2017/10/26 Javascript
Bootstrap 树控件使用经验分享(图文解说)
2017/11/06 Javascript
JavaScript面向对象继承原理与实现方法分析
2018/08/09 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
2018/08/13 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
2019/05/22 Javascript
nodejs提示:cross-device link not permitted, rename错误的解决方法
2019/06/10 NodeJs
vue swipe自定义组件实现轮播效果
2019/07/03 Javascript
ES6之Proxy的get方法详解
2019/10/11 Javascript
Vue项目中如何使用Axios封装http请求详解
2019/10/23 Javascript
vue请求服务器数据后绑定不上的解决方法
2019/10/30 Javascript
JavaScript中的类型检查
2020/02/03 Javascript
JavaScript动态生成表格的示例
2020/11/02 Javascript
[03:46]显微镜下的DOTA2第七期——满血与残血
2014/06/20 DOTA
[04:32]玩具屠夫中文语音节选
2020/08/23 DOTA
Python实现全局变量的两个解决方法
2014/07/03 Python
基于python实现百度翻译功能
2019/05/09 Python
python elasticsearch从创建索引到写入数据的全过程
2019/08/04 Python
解决selenium+Headless Chrome实现不弹出浏览器自动化登录的问题
2021/01/09 Python
StubHub智利:购买和出售您的门票
2016/11/23 全球购物
Python面试题:Python是如何进行内存管理的
2014/08/04 面试题
门卫岗位安全职责
2013/12/13 职场文书
无犯罪记录证明范本
2014/09/15 职场文书
贷款担保书范本
2015/09/22 职场文书
Python基础之条件语句详解
2021/06/16 Python
微软PC Health Check电脑健康状况检查应用下载(Win11配置检测工具)
2021/06/26 数码科技