bind和on的区别
bind方法与on方法都是事件绑定,但是两者却又有着一个大区别:事件委托
jquery文档中bind和on函数绑定事件的用法:
.bind(events [,eventData], handler)
.on(events [,selector] [,data], handler)
从文档中可以看出,.on方法比.bind方法多一个参数'selector'子类选择器;
事件委托就是子类的事情委托给父类的去做,而这就让我们想起了冒泡事件,是的,这的确是委托事件的原型,而我们的selector,则是判断是不是那个子元素触发的事件,如果不是,自然就忽略掉了;
好处
1.万一子元素非常多,给每个子元素都添加一个事件,会影响到性能;
2.为动态添加的元素也能绑上指定事件;
1比如一个有着1000条新闻的新闻列表,当我们绑定1000次的时候,会耗费很多资源,而一次事件委托就足够了;
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事件
bind和on的区别的更多相关文章
- jQuery中的bind() live() delegate()之间区别分析
		jQuery中的bind() live() delegate()之间区别分析 首先,你得要了解我们的事件冒泡(事件传播)的概念,我先看一张图 1.bind方式 $('a').bind('click', ... 
- Jquery中bind和live的区别
		Jquery中绑定事件有三种方法:以click事件为例 (1)target.click(function(){}); (2)target.bind("click",function ... 
- Bind和Eval的区别详解
		原文:Bind和Eval的区别详解 1.简单描述Eval和Bind的区别 绑定表达式 <%# Eval("字段名") %> <%# Bind("字段名& ... 
- [jQuery]on和bind事件绑定的区别
		on和bind事件绑定的区别 一个demo展示 <!DOCTYPE html> <html lang="zh"> <head> <titl ... 
- bind,call,applay的区别
		方法调用模式: 当一个函数被保存为对象的一个方法时,如果调用表达式包含一个提取属性的动作,那么它就是被当做一个方法来调用,此时的this被绑定到这个对象. var a = 1 var obj1 = { ... 
- jQuery bind()与delegate()的区别
		笔试题: bind()与delegate()的区别主要有三点: 1 绑定目标 .bind直接绑在目标元素上 .delegate绑在父元素上 2 监听个数 .bind监听个数多——每个目标元素都需要添 ... 
- bind call apply 的区别和使用
		bind call apply 的区别和使用:https://www.jianshu.com/p/015f9f15d6b3 在讲这个之前要理解一些概念,这些概念很重要,有人说过学会了javascrip ... 
- JQ的live(),on(),deletage(),bind()几个的区别
		今天在网上看到一篇文章,关于JQ里面事件绑定的区别,说说我自己看后的理解,本人菜鸟一枚,很多东西不懂 ,有理解错误的还望大神们多多指教 bind()方法是绑定事件最直接的方法,这个方法是绑定到docu ... 
- Android入门-Service-start,end,bind,unbind之间的区别
		写贴一段别人关于service中start与bind,end与unbind的分析了: Service创建有两种方法: startService或者bindService 服务不能自己运行,需要通过调 ... 
- call ,apply 和 bind的用法与区别
		作用都是一样的,官方解释:"调用一个对象的一个方法,以另一个对象替换当前对象", 简单来说就是改变当前使用该方法的对象中的this指向: var xw = { name : &qu ... 
随机推荐
- @JSONField使用
			参考博客:http://www.cnblogs.com/yucy/p/9057049.html 1.经常遇到这种情况,传过来json的key名和我们javaBean的属性名不一样,导致接收不到: Ch ... 
- 教你如何下载并破解IAR
			最近参加项目要写STM8的工程的,所以用到IAR,所以就自己安装了一次然后写个心得. 因为我用到的是STM8,所以我就下载了STM8的,不过其他过程都一样的. 首先去到IAR SYSTEMS的官网,找 ... 
- 解决WCF“接收对 http://xxx.svc 的 HTTP 响应时发生错误。这可能是由于服务终结点绑定未使用 HTTP 协议造成的。这还可能是由于服务器中止了 HTTP 请求上下文(可能由于服务关闭)所致"
			最近在工作中新加了一个接口,本地调试的时候,直接抛出“接收对 http://xxx.svc 的 HTTP 响应时发生错误.这可能是由于服务终结点绑定未使用 HTTP 协议造成的.这还可能是由于服务器中 ... 
- Linux7.2 UDEV
			1. 生成规则文件 touch /etc/udev/rules.d/99-oracle-asmdevices.rules 或者 touch /usr/lib/udev/rules.d/99-oracl ... 
- Centos 7.5下搭建SVN源代码服务器
			1.先查看是否存在svn,没有就需要安装svn svnserve --version #查看svn版本号 which svn #查看svn程序所在目录 yum install subversion - ... 
- day2.jmeter简单压测,下载文件,Charles手机抓包准备
			一.压测 压测衡量一个系统的好坏:1.tps每秒钟处理的事物数,2.qps响应时间 添加聚合报告,更改线程组,运行接口请求 **添加压力机 1.首先确保都在同一网段 2.其他电脑要先启动jmeter- ... 
- tomcat9配置https
			首先去阿里云申请一个pfx证书,可以免费获得. 其次,在tomcat的server.xml增加如下connector <Connector port="443" protoc ... 
- dva中roadhog版本升级后带来的问题及解决方法
			从同事手中接手项目之后.npm install 然后npm start的时候.开始报上图的错误.解决方法一(比较 愚蠢)当时找到的解决方法都没有用.然后只能按照报错的路径,从同事那边复制了node_m ... 
- [C#]位运算符
			参考链接: http://www.runoob.com/csharp/csharp-operators.html 表: 简单来说,就是: &:全1为1,否则为0 |:有1为1,否则为0 ^:不 ... 
- mysql 表
			关系 create table scores( id int primary key auto_increment, stuid int, subid int, score decimal(5,2) ... 
