jquery中on和bind之间有什么区别?

bind方法与on方法都是事件绑定,但是两者却又有着一个大区别:事件冒泡(事件代理);

jquery文档中bind和on函数绑定事件的用法:

.bind(events [,eventData], handler)
.on(events [,selector]  [,data], handler)

从文档中可以看出,.on方法比.bind方法多一个参数'selector',也就是子类选择器,用于规定只能添加到指定的子元素上的事件处理程序。

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

.on的selector参数是筛选出调用.on方法的dom元素的指定子元素,如:

$('ul').on('click', 'li', function(){console.log('click');})就是筛选出ul下的li给其绑定click事件;

那么这个selector参数的好处是什么?

好处在于.on方法

原理是事件冒泡,进行事件委托,子元素把事件委托给父元素进行事件处理;

这样的好处

  1. 万一子元素非常多,给每个子元素都添加一个事件,会影响到性能;

  2. 为动态添加的元素也能绑上指定事件;

如:

$('ul li').on('click', function(){console.log('click');})的绑定方式和$('ul li').bind('click', function(){console.log('click');})一样;

我通过js给ul添加了一个li:$('ul').append('<li>js new li<li>');');这个新加的li是不会被绑上click事件的

但是我用$('ul').on('click', 'li', function(){console.log('click');}方式绑定,然后动态添加li:$('ul').append('<li>js new li<li>');这个新生成的li被绑上了click事件

Image placeholder
前端答疑
未设置
  96人点赞

没有讨论,发表一下自己的看法吧

推荐文章
jquery中prop()和attr()之间有什么区别?

1、操作对象不同很明显,attr和prop分别是单词attribute和property的缩写,并且它们均表示"属性"的意思。不过,在jQuery中,attribute和property却是两个不同的

jquery中$和$()之间有什么区别?

$就是jQuery的别称而jQuery就是jQuery库提供的一个函数。这个函数的作用是根据()里的参数进行查找和选择html文档中的元素,函数作用之一就是GetElementByID的代替,但()内

vue和jquery之间有什么区别?

首先我们来了解一下jquery和vue是什么?Vue是什么?Vue.js是一个前端JavaScript框架,用于构建用户界面。它是开源的。当使用其他JavaScript库时,它还可以用作集成工具。它本

jquery和js之间有什么区别?

js是一种脚本语言,常用于网页客户端编程,使网页在客户端浏览器中,实现更多地动态功能,表现出更加丰富的视觉效果。jQuery是一个简洁而快速的JavaScript库,可用于简化事件处理,HTML文档遍

jquery on()与click()之间有什么区别?

jqueryon()与click()的区别click()属于静态加载,当页面加载完,就不在为新增加的元素添加点击事件。on()属于动态加载,当页面加载完,可以为新增加的元素添加事件。但是必须选定负级元

angular和vue之间有什么区别?

相同:1.数据绑定:vue和angular绑定都可以用{{}}2.都支持内置指令和自定义指令3.都支持内置过滤器和自定义过滤器。区别:1.学习成本和API设计:vue相比于angular来说更加的简单

jsp和html之间有什么区别?

HTML(HypertextMarkupLanguage)文本标记语言,它是静态页面,和JavaScript一样解释性语言,为什么说是解释性语言呢?因为,只要你有一个浏览器那么它就可以正常显示出来,而

jquery中on()和click()的区别是什么?

on()和click()的区别:click()属于静态加载,当页面加载完,就不在为新增加的元素添加点击事件。on()属于动态加载,当页面加载完,可以为新增加的元素添加事件。但是必须选定负级元素。二者在

jquery easyui和bootstrap的区别是什么?

JQueryEasyUIJQueryEasyUI是一组基于jQuery的UI插件集合体,而jQueryEasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复

jquery和jquery ui的区别?

jquery和jqueryui的区别?区别有:1、jQuery是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等。 2、jQueryUI则是在jQuery的基础上,利用jQuery的扩展性,

jQuery中attr()和prop()的区别?

attr():attr()方法设置或返回被选元素的属性和值。当该方法用于返回属性值,则返回第一个匹配元素的值。当该方法用于设置属性值,则为匹配元素设置一个或多个属性/值对。prop():prop()方

jquery中bind与on的区别是什么?

jquery中bind与on的区别bind和on都是事件绑定,都是给元素绑定事件用的,但是两者却又有着一个大区别:事件冒泡(事件代理)。事件冒泡也是委托事件的原型,事件委托就是子类的事情委托给父类的去

jquery中children()和find()的区别是什么?

jquery中children()和find()的区别children(selector)方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈)。参数可选,添加参数表示通过选择器进行过滤,对元素进行

jQuery中this和$(this)的区别是什么?

jQuery中this和$(this)的区别是什么?●$(this)相当于jQuery(this),是一个jQuery对象,只能使用jQuery的属性和方法;●this中存放的是DOM元素,属于jav

jquery中size()与length的区别是什么?

jQuerylength和size()区别length是属性,size()是方法。如果你只是想获取元素的个数,两者效果一样既("img").length和("img").size()获取的值是一样的。

jquery中attr和prop的区别是什么?

在jQuery中,attr()函数和prop()函数都用于设置或获取指定的属性,它们的参数和用法也几乎完全相同。但不得不说的是,这两个函数的用处却并不相同。下面我们来详细介绍这两个函数之间的区别。jq

云原生存储和云存储有什么区别?

作者| 李鹏(壮怀)阿里云智能事业群高级技术专家导读:新的企业负载/智能工作负载容器化、迁云、存储方面遇到的性能、弹性、高可用、加密、隔离、可观测性以及生命周期等方面的问题,不但需要存储产品层次的改进

jquery text() val() html()之间的区别是什么?

jquerytext()val()html()之间的区别是什么?●text()获取元素内的文本,相当于js中的innerText●val()获取表单元素的值,相当于js中的input.value●ht

innerHTML与jquery里的html()区别?

innerHTML与jquery里的html()区别?●html()可以设置tbody、tr这些只读标签,而innerHTML在低版本IE下不行;jQuery的html()做了些容错处理,原生的Dom

jquery中deferred对象是什么?

jquery中deferred对象是什么?Deferred是JQuery的一个延迟对象,意思是函数延迟到某个点才开始执行,改变执行状态的方法有两个(成功:resolve和失败:reject),分别对应

jquery中slider是什么?

slider(滑块)是jqueryUI中的一个小插件。jQueryUI滑块(Slider)插件允许通过滑块进行选择。有各种不同的选项,比如多个手柄和范围。手柄可通过鼠标或箭头按键进行移动。滑块部件(S

jquery变量加$和不加$的区别?

jquery变量加$和不加$的区别?加$和不加$没有区别,因为它们都是jquery变量。一般在给jquery对象取名的时候在前面加$。一看就知道是jquery对象。变量命名规则中起始字符可以是:●字母

jquery ui和easyui区别?

jqueryui和easyui区别?●jqueryui是jQuery插件,是由jQuery官方维护的UI方向的插件●easyui也是jQuery插件,是第三方维护的插件●jqueryui是免费的界面库

jQuery中#是什么意思?

jQuery中#是什么意思?#是jquery选择器的一种形式,匹配任意html中id的对象。$("#idvalue"):这个代码选中html文档中,即;jQuery元素选择器和属性选择器允许您通过标签

jquery中each()怎么用?

jquery中each()怎么用?在jquery中的each有两种用法,分别是$.each()和$(selector).each()。$(selector).each()用于jquery对象的遍历$.