关于事件委托的整理，另附bind,live,delegate,on区别

随着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()阻止了事件传播，那么事件委托就会失效。

转载于:https://www.cnblogs.com/MagicZhao123/p/5980957.html

关于事件委托的整理，另附bind,live,delegate,on区别相关推荐

jQuery 中bind(),live(),delegate(),on() 区别
on()来改写通过 .bind(), .live(), .delegate()所注册的事件 /* The jQuery .bind(), .live(), and .delegate() method ...
JQuery 之事件委托(事件代理)
事件委托/事件代理: 事件委托就是利用冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操事件委托的写法: $(选择器).delegate( 事件真实发生在谁身上, 事件属性,匿名函 ...
C# 实例解析事件委托之EventHandler
概述事件属于委托的一个子集,像我们平时界面上的鼠标点击按钮后响应事件.事件的发布和订阅等都需要用到委托.通过委托可以很好的实现类之间的解耦好.事件委托EventHandler的函数原型如下:del ...
js事件委托和jQuery事件绑定on , off , one , bind , unbind , die
一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这 100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生. 而在jQuery ...
JavaScript之事件委托（附原生js和jQuery代码）
事件委托的原理依赖于事件冒泡,可以通过给父元素的事件委托来确定是哪个子元素触发了事件从而做一系列操作. 使用事件委托的优点 1.操作子元素时不用一一遍历,可以根据事件触发的对象而进行相应操作 dom结 ...
JavaScript：事件冒泡和事件委托
2019独角兽企业重金招聘Python工程师标准>>> JavaScript事件代理和委托(Delegation) JavaScript事件冒泡和事件委托 JavaScript:通过 ...
html5 点击事件委托,jquery事件委托
一,.on( events [, selector ] [, data ], handler(eventObject) )// .on( events [, selector ] [, data ] ...
javascript和jq的事件委托
2019独角兽企业重金招聘Python工程师标准>>> 今天在公司,有个需求是,通过ajax动态查询数据,回来,再添加到一个ul的li元素中,例如(点击生成 li 模拟,加载数据生成 ...
事件委托技术原理和使用（js，jquery）
事件委托技术原理和使用(js,jquery) 原创 2016年03月10日 11:18:56 标签: 技术 / jquery / javascript 2555 一:事件委托技术原理摘自http:/ ...

关于事件委托的整理，另附bind,live,delegate,on区别

关于事件委托的整理，另附bind,live,delegate,on区别相关推荐

最新文章

热门文章

关于事件委托的整理 ，另附bind,live,delegate,on区别

关于事件委托的整理 ，另附bind,live,delegate,on区别相关推荐

最新文章

热门文章

关于事件委托的整理，另附bind,live,delegate,on区别

关于事件委托的整理，另附bind,live,delegate,on区别相关推荐