• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > jquery on bind之间有什么区别

jquery on bind之间有什么区别

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含jquery,bind,区别等相关知识,匿名希望在学习及工作中可以帮助到您

JQuery从1.7+版本开始,提供了on()和off(),进行事件处理函数的绑定和取消。这2个API与JQuery最初提供的bind()和unbind()有很多相似的地方,也有一些不同之处。bind和unbind的详细介绍,可以参考这篇文章。

on()和bind()的函数签名如下:


  1. bind(type, [data], fn)  
      
    on(type,[selector],[data],fn)

可以看到2个函数的区别在于:是否支持selector这个参数值。由于javascript的事件冒泡特性,如果我们在父元素上注册了一个事件处理函数,当子元素上发生这个事件的时候,父元素上的事件处理函数也会被触发。如果使用on的时候,不设置selector,那么on与bind就没有区别了。

  1. <p id="parent">  
        <input type="button" value="a" id="a"/>  
        <input type="button" value="b" id="b"/>  
    </p>


上面这段代码,如果我们使用bind()在parent上绑定了click事件处理函数,当点击a或者b按钮的时候,都会执行事件处理函数。如果我们希望点击a的时候触发,点击b的时候不触发,那么可以使用on,代码如下


  1. $("#parent").on("click","#a",function(){  
        alert($(this).attr("id"));  
    });

可以看到:on()函数的参数selector就是为了在事件冒泡的时候,让父元素能够过滤掉子元素上发生的事件。如果使用了bind,那么就没有这个能力,子元素上发生的事件一定会触发父元素事件。

还有一点需要注意:on绑定的事件处理函数,对于未来新增的元素一样可以,和delegate效果相同,而bind则不行。

以上就是jquery on bind之间有什么区别的详细内容,更多请关注微课江湖其它相关文章!

您可能想查找下面的文章:

  • 使用jquery实现HTML5响应式导航菜单教程
  • 如何使用插件数字滚动插件numberAnimate.js?
  • HTML5和jQuery实现弹出创意搜索框层的方法
  • html5和css3以及jquery实现音乐播放器
  • 如何使用jQuery和HTML5实现手机摇一摇的换衣特效
  • JQuery $()用法总结
  • jQuery+koa2怎么实现Ajax请求
  • jQuery怎么实现左右滑动的toggle
  • jQuery中如何实现toggle方法
  • jQuery+JSONP跨域需要怎样实现

相关文章

  • 2018-12-03H5移动端各种各样的列表的制作方法(五)
  • 2017-08-06HTML5 embed 标签使用方法介绍
  • 2018-12-03HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用_html5教程技巧
  • 2018-12-03IE支持HTML5的解决方法_html5教程技巧
  • 2018-12-03如何使用插件数字滚动插件numberAnimate.js?
  • 2018-12-03Drag事件编辑器实现拖拽上传图片效果
  • 2018-12-03怎样用H5计算手机摇动次数
  • 2018-12-03html5中关于封装和添加与获取删除以及cookie介绍
  • 2018-12-03HTML5对手机页面长按会粘贴复制禁用的解决方法
  • 2018-12-03HTML5 CANVAS:绘图状态和状态栈

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • html5使用canvas画空心圆与实心圆
    • HTML5优化Web动画—requestAnimationFrame
    • Zepto.js 适合用来开发移动设备浏览器上的 HTML5 应用吗?
    • html5定位获取当前位置并在百度地图上显示_html5教程技巧
    • HTML5 history新特性pushState、replaceState及两者的区别
    • html5需要遵守的6个原则(介绍)
    • HTML5的Geolocation地理位置定位API使用教程
    • HTML5实现获取地理位置信息并定位功能
    • HTML5 CANVAS:绘制阴影和填充模式
    • HTML5实现锚点时请使用id取代name_html5教程技巧

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有