jquery on bind之间有什么区别

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

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

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

登录后复制

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

              

登录后复制

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

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

登录后复制

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

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

以上就是jquery on bind之间有什么区别的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3125556.html

(0)
上一篇 2025年3月29日 19:49:02
下一篇 2025年3月8日 01:39:00

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • HTML5面试题PC端和移动端区别

    个人觉得pc端的定位就是用户视觉浏览路线,可以显示较多的内容,而移动互联网终端的定位就是便携。本文主要和大家分享html5面试题pc端和移动端区别介绍,感兴趣的朋友参考下,希望能帮助到大家。 一、概念 1、PC端和移动端有什么区别 从我个人…

    编程技术 2025年3月29日
    100
  • 如何实现jquery回车登录效果

    这次给大家带来如何实现jquery回车登录效果,实现jquery回车登录效果的jquery有哪些,下面就是实战案例,一起来看一下。 最近在做项目登录时,每次都需要点击登录jquery才可以进入相应的页面,给用户一个很不好的体验,所以我就添加…

    编程技术 2025年3月29日
    100
  • jquery中select组件的使用方法

    这次给大家带来jquery中select组件的使用方法,使用jquery中select组件的注意事项有哪些,下面就是实战案例,一起来看一下。 jquery获取select选择的文本与值 获取select : 获取select 选中的 tex…

    编程技术 2025年3月29日
    100
  • jQuery中如何实现toggle方法

    这次给大家带来jQuery中如何实现toggle方法,使用jQuery中的toggle方法注意事项有哪些,下面就是实战案例,一起来看一下。 我们知道使用 jQuery 来实现上下移入移除,可以直接使用 slideUp() 和 slideDo…

    编程技术 2025年3月29日
    100
  • 如何使用jQuery和HTML5实现手机摇一摇的换衣特效

    经常我们玩微信都会用到查到附近的人,都是在app上实现手机摇一摇的功能。现在,我们将此技术搬移到手机web上,供大家学习,有需要的小伙伴可以参考下。 手机摇一摇可以应用到很多场景中,如摇一摇换抽奖,摇一摇搜歌等。本文我将给大家介绍如何使用H…

    编程技术 2025年3月29日
    100
  • HTML5和jQuery实现弹出创意搜索框层的方法

    本文主要分享了jquery和html5弹出创意搜索框层的实例代码。具有一定的参考价值,下面一起来看下吧 本效果适用于移动设备,可以使用手机等浏览效果。 HTML代码如下: nbsp;html>jQuery+CSS3创意搜索框特效 – …

    编程技术 2025年3月29日
    100
  • letter-spacing和word-spacing有什么区别

    语法: letter-spacing : normal | length 参数: normal :  默认间隔length :  由浮点数字和单位标识符组成的长度值,允许为负值。请参阅长度单位 说明: 检索或设置letter-spacing…

    编程技术 2025年3月29日
    100
  • css中text-indent 用法及与padding 的区别详解

    语法: text-indent : length  参数:  length :  百分比数字|由浮点数字和单位标识符组成的长度值,允许为负值。请参阅长度单位  说明:  检索或设置对象中的文本的缩进。在被另一个对象(如)断开的对象内不能应用…

    编程技术 2025年3月29日
    100
  • css的text-align与align区别

    text-align的text-align: 语法:  text-align : left | right | center | justify 登录后复制 参数: left :  左对齐right :  右对齐center :  居中ju…

    编程技术 2025年3月29日
    100
  • css中<img>与<background-image>的区别

    background-image是背景background-image,是css的一个样式     是一个块级元素,它是一个图片,是html的一个标签     background-image是只能看的      是可以操作的。比如更换im…

    编程技术 2025年3月29日
    100

发表回复

登录后才能评论