随着DOM结构的复杂化和Ajax等动态脚本技术的运用导致如今的js界里最火热的一项技术应该是‘事件委托(event delegation)’了,什么是事件委托呢?小七给你娓娓道来,说白了就是想给子元素添加事件反而添加到父元素的身上,现在的你可能会说博主有病,放屁脱裤子多此一举,那么博主告诉你博主放屁是不脱裤子的,下面说下什么时候使用事件委,(1)考虑一个ul,在li的数量非常少的时候,为每一个li添加事件当然不会存在太多性能方面的问题,但是当列表非常的长for循环太浪费内存,长到上百上千甚至上万的时候,为每个li添加事件就会对页面性能产生很大的影响。(习惯用ul了,其他元素嵌套关系自行脑补)(2)给一个ul里面的几个li添加了事件但是如果动态又生成了li则刚生成的li不具备事件这时就需要用到委托。
使用委托的优点:原本需要给多个元素添加事件的现在只需要给他们的父元素添加事件,提高性能,提高可读性。
那么现在是不是有点了解了呢?废话不多说直接上图,高清无码的哦、
点击每一个li都会触发事件alert出1。
HTML:

Jq代码不用委托:


Jq代码事件委托:

li就是子元素,jq委托的格式就是这样记住就行,当然on可以用bind,live,delegate.然而为什么小七没用呢自然是有原因的。
jQuery 1.3之前使用.bind()实现委托给他已经存在的子元素绑定事件,但不能给未来新增的元素绑定事件
为了突破单一.bind()方法的局限性jQuery 1.3使用live()方法但却只能放在直接选择的元素后面,不能在层级比较深,连缀的DOM遍历方法后面使用,即$(“ul”").live...可以,但$("body").find("ul").live...不行;
后来,为解决“事件传播链”过长的问题, jQuery 1.4.2干脆直接引入了一个新方法.delegate()。
根据jQuery 1.7 Beta 1的发版说明,jQuery 1.7为了解决.bind()、.live()和.delegate()并存造成的不一致性问题,将会增加一对新的事件方法:.on(),所以不用纠结用刀还是用枪了以后直接用迫击炮(on()方法)
提示:使用事件委托时,如果注册到目标元素上的其他事件处理程序使用.stopPropagation()阻止了事件传播,那么事件委托就会失效。

关于事件委托的整理 ,另附bind,live,delegate,on区别的更多相关文章

  1. jQuery中的bind() live() delegate()之间区别分析

    jQuery中的bind() live() delegate()之间区别分析 首先,你得要了解我们的事件冒泡(事件传播)的概念,我先看一张图 1.bind方式 $('a').bind('click', ...

  2. jQuery bind()与delegate()的区别

    笔试题: bind()与delegate()的区别主要有三点: 1 绑定目标 .bind直接绑在目标元素上 .delegate绑在父元素上 2  监听个数 .bind监听个数多——每个目标元素都需要添 ...

  3. jquery实现input输入框实时输入触发事件代码 ---jQuery 中bind(),live(),delegate(),on() 区别

    复制代码 代码如下: <input id="productName" name="productName" value="" /> ...

  4. jQuery事件函数bind,live,delegate的区别

    DOM树 首先,可视化一个HMTL文档的DOM树是很有帮助的.一个简单的HTML页面看起来就像是这个样子: 事件冒泡(又称事件传播) 当我们点击一个链接时,其触发了链接元素的单击事件,该事件则引发任何 ...

  5. jQuery 中bind(),live(),delegate(),on() 区别(转)

    当我们试图绑定一些事件到DOM元素上的时候,我相信上面这4个方法是最常用的.而它们之间到底有什么不同呢?在什么场合下用什么方法是最有效的呢? 准备知识: 当我们在开始的时候,有些知识是必须具备的: D ...

  6. 转 jQuery 中bind(),live(),delegate(),on() 区别

    当我们试图绑定一些事件到DOM元素上的时候,我相信上面这4个方法是最常用的.而它们之间到底有什么不同呢?在什么场合下用什么方法是最有效的呢? 准备知识: 当我们在开始的时候,有些知识是必须具备的: D ...

  7. jQuery中.bind() .live() .delegate() .on()区别

    $(selector).bind(event,data,function) $(selector).live(event,data,function)//jquery1.9版本以下支持,jquery1 ...

  8. jQuery 中bind(),live(),delegate(),on() 区别

    on()来改写通过 .bind(), .live(), .delegate()所注册的事件 /* The jQuery .bind(), .live(), and .delegate() method ...

  9. on bind live delegate的区别

    bind()----直接绑定在元素上 live()----通过冒泡的方式绑定到元素上,更适合于列表类型的绑定,和bind()相比,支持动态数据 delegate()----精确的小范围的适用事件代理, ...

随机推荐

  1. ~递归递归(FBI树--蓝桥)

    1220: FBI树 [递归] 时间限制: 1 Sec 内存限制: 128 MB 提交: 5 解决: 4 状态 题目描述 我们可以把由“0”和“1”组成的字符串分为三类:全“0”串称为B串,全“1”串 ...

  2. char,varchar与text类型的区别和选用

    (1)char: 它是定长格式的,但是长度范围是0~255. 当你想要储存一个长度不足255的字符时,mysql会用空格来填充剩下的字符.因此在读取数据时,char类型的数据要进行处理,把后面的空格去 ...

  3. dubbo的ExtensionLoader

    了解4个概念:接口,实现类,wrapper,adaptive. 扩展是接口实现类被wrap之后的对象,adaptive扩展是动态生成的类(例如Dubbo$Adaptive类). dubbo框架为接口指 ...

  4. 072——VUE中vuex之使用mutations修改购物车仓库数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. hadoop mongodb install(3)

    reference:http://dblab.xmu.edu.cn/blog/868-2/ root@iZuf68496ttdogcxs22w6sZ:~# mv mongodb-linux-x86_6 ...

  6. oracle创建dblink方法

    当用户要跨本地数据库,访问另外一个数据库表中的数据时,本地数据库中必须创建了远程数据库的dblink,通过dblink本地数据库可以像访问本地数据库一样访问远程数据库表中的数据.下面讲介绍如何在本地数 ...

  7. 使用scrapy-redis构建简单的分布式爬虫

    前言 scrapy是python界出名的一个爬虫框架.Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 可以应用在包括数据挖掘,信息处理或存储历史数据等一系列的程序中. 虽然scr ...

  8. Nginx+Tomcat简单集群

    1.软件准备下载Nginx和Tomcat解压到一个目录2.修改Tomcat的端口Tomcat1:修改Server.xmlTomcat2:修改Server.xml3.测试Tomcat是否正常运行分别访问 ...

  9. 【DevExpress v17.2新功能预告】WinForms上的图表增强

    在WinForms Charts v17.2中,我们新增了一些有用的功能,开发人员和最终用户可能都会喜欢. 基于标准的过滤 Chart控件已经支持一系列的过滤,但是在这个版本中,我们用FilterCr ...

  10. Spring Data操作Redis时,发现key值出现 \xac\xed\x00\x05t\x00\tb

    原文链接:http://blog.csdn.net/yunhaibin/article/details/9001198 最近在研究redis,以及spring data对redis的支持发现了一个奇怪 ...