jquery开发:事件冒泡机制与委托机制,jQuery动态绑定
来源:互联网 发布:炫浪网络社区看不了 编辑:程序博客网 时间:2024/05/02 04:44
一、事件的捕获与冒泡
由W3C规定的DOM2标准中,一次事件的完整过程包括三步:捕获→执行目标元素的监听函数→冒泡,在捕获和冒泡阶段,会依次检查途径的每个节点,如果该节点注册了相应的监听函数,则执行监听函数。以下面的HTML结构为例:
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
执行的流程应该是这样的:
下面是一组例子,分别点击孩子节点可以清楚的看到第三个参数的影响:
父亲节点的监听函数在捕获阶段执行:
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
孩子父亲节点的监听函数在冒泡阶段执行:
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
父亲节点的监听函数在捕获冒泡阶段都执行:
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
如果不想让事件向上冒泡,可以在监听函数中调用event.stopPrapagation()来完成,这样父亲节点就捕捉不到该事件了。在实际的开发中,这一用处还是挺多的。
js事件冒泡
js所谓的事件冒泡就是子级元素的某个事件被触发,它的上级元素的该事件也被递归执行,jQuery中的事件委托就是用的冒泡。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
当li的点击事件被触发时,父级ul的点击事件也被触发执行了。
对于通过这种方式绑定的事件实际上是挂载在$('#ulOuter')
上的,点击$('#ulOuter')
区域后会触发e.target
的判断,简单的实现就相当于:
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
而在某些场合我们是不希望它冒泡的,达到点击 ul 时触发 ul 上(li 外围)的事件处理函数,点击 li 时只触发 li 上的函数而不触发 ul 上的函数的效果,应该将事件委托到 ul 上,然后stopPropagation阻止冒泡:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
加上e.stopPropagation(); 这一句便可以阻止事件冒泡了。这样的效果是点击 li 标签只触发 li 的点击事件,点击 li 之外的 ul 触发父元素的点击事件。
实际上,事件委托的事件处理函数是当被委托的元素上的事件触发时判断e.target后执行,而不是目标元素上的事件被触发后就立即执行,在没有阻止冒泡的情况下,事件还是一层层传播的,只是处理函数在事件到达那一层被触发的问题。根据事件代理的规则,点击li元素后,click事件是从li至ul至ul父元素一层层冒泡上去的,沿途触发各个元素上的事件处理函数。如果我们将事件委托在ul上,调用了stopPropagation,就阻止了事件从ul继续向上冒泡,而不是阻止事件从li向上冒泡。这样从ul开始,ul及其祖先元素上的事件冒泡被阻止。
二、事件委托机制
知道了事件的捕获冒泡机制,我们可以利用它来实现更方便的程序控制,事件委托便是最典型的应用之一。下面来说说JavaScript中的事件委托机制。什么叫委托呢?想想我们现实生活中,自己不想干的事,让别人来帮忙完成,这就是把事情“委托”给别人。Javascript的事件委托机制也是这个道理,本来一个监听函数要处理节点a触发的事件,现在把这个监听函数绑定到节点a的父层节点上,让它的父辈来完成事件的监听,这样就把事情“委托”了过去。在父辈元素的监听函数中,可通过event.target属性拿到触发事件的原始元素,然后再对其进行相关处理。
那这样做有什么好处呢?最大的用处便是监听动态增加的元素。比如我们现在有这样的需求,点击下面每个列表项弹出各自的内容,现在随着web应用的盛行,网页中使用异步请求来动态加载节点已经变的很普遍,所以我们点击下方的按钮要在列表中增加一项,并且点击新增加的节点也要弹出内容。HTML结构如下:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
若我们使用之前的监听器绑定方式,需要遍历所有的li元素并监听,代码应该是这样的:
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
运行效果如下:
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
可以发现当新增元素后,点击它并没有弹出内容。那是当然的了,因为我们并没有给新增的元素绑定监听器,为了实现点击新增元素也弹出内容,我们不得不在每次新增一个元素后,再进行一次绑定。加一个绑一个,加一个绑一个,累不累啊!你不累浏览器都累了!这样做导致的性能开销是可想而知的,而且浏览器还要维系n多元素与应的监听函数的映射关系,会占用大量内存。
面对这样拖沓冗杂的代码,你是不是已经不能忍,来看看使用事件委托的效果,代码如下:
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
看看实际运行的效果:
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
我们并未给li元素绑定任何监听器,而是监听它的父元素ul,等到事件冒泡上来的时候,在处理函数中通过event.target获得触发事件的li元素,进行相关处理。这样做的好处是显而易见的,首先只进行了一次监听器的绑定,浏览器轻松,其次动态增加元素后你也不必要再绑定监听器,你也轻松。正所谓大家好才是真的好!
jQuery事件委托
假如现在有10个按钮,要为每个按钮绑定一个click事件,可能才十个按钮,你可以一个一个的绑定或用循环进行绑定,但是这样性能呢?
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 1
- 2
- 3
- 1
- 2
- 3
这里可以看出,我们只是为所有的button的一个父级绑定了click事件,而不是为所有的button绑定事件,极大的提高了性能,这样做的好处还有可以对动态加进来的元素进行处理:就是有一个按钮原本的dom里面是没有的,是你通过其他方式添加进来的,即未来元素,用直接绑定方法是不能成功的,只能用事件委托,委托给该元素的父级进行处理。
由于事件委托是通过事件冒泡实现的,所以如果子级的元素阻止了事件冒泡,那么事件委托也将失效!
其实jQueryjQuery 1.7 Beta 1之前版本为绑定和委托事件提供了.bind()
、.live()
和.delegate()
方法,可以说是一步步改进。
.bind()
假设有一个多行多列的表格,我们想让用户单击每个单元格都能看到与其中内容相关的更多信息(比如,通过提示条)。为此,可以为每个单元格都绑定click事件:
- 1
- 1
问题是,如果表格中要绑定单击事件的有10列500行,那么查找和遍历5000个单元格会导致脚本执行速度明显变慢,而保存5000个td元素和相应的事件处理程序也会占用大量内存。
.live()
事件委托可以解决上述两个问题。具体到代码上,只要用jQuery 1.3新增的.live()
方法代替.bind()
方法即可:
- 1
- 1
这里的 .live()
方法会把click事件绑定到 $(document)
对象(但这一点从代码中体现不出来,这也是.live()方法饱受诟病的一个重要原因,稍后再详细讨论),而且只需要给$(document)
绑定一次(不是50次,更不是5000次)。在接收到任何事件时,$(document
)对象都会检查事件类型和事件目标,如果是click事件且事件目标是td,那么就执行委托给它的处理程序。
一切似乎很完美。可惜,事实并非如此。因为.live()
方法并不完美,它有如下几个主要缺点: $()
函数会找到当前页面中的所有td元素并创建jQuery对象,但在确认事件目标时却不用这个td元素集合,而是使用选择符表达式与event.target或其祖先元素进行比较,因而生成这个jQuery对象会造成不必要的开销;
默认把事件绑定到$(document)
元素,如果DOM嵌套结构很深,事件冒泡通过大量祖先元素会导致性能损失;
只能放在直接选择的元素后面,不能在连缀的DOM遍历方法后面使用,即$("#infotable td").live...
可以,但$("#infotable").find("td").live...
不行;
收集td元素并创建jQuery对象,但实际操作的却是$(document)
对象,令人费解。
而为了避免事件冒泡造成的性能损失,jQuery从1.4开始支持在使用.live()
方法时配合使用一个上下文参数:
- 1
- 1
这样,“受托方”就从默认的$(document)
变成了$("#infotable")[0]
,节省了冒泡的旅程。
.delegate()
如前所述,为了突破单一.bind()
方法的局限性,实现事件委托,jQuery 1.3引入了.live()
方法。后来,为解决“事件传播链”过长的问题,jQuery 1.4又支持为.live()
方法指定上下文对象。而为了解决无谓生成元素集合的问题,jQuery 1.4.2干脆直接引入了一个新方法.delegate()
。
使用.delegate()
,前面的例子可以这样写:
- 1
- 1
jQuery 1.7为了解决.bind()
、.live()
和.delegate()
并存造成的不一致性问题,将会增加一对新的事件方法:.on()
和.off()
:
- 1
- 2
- 1
- 2
如果指定selector,则为事件委托;否则,就是常规绑定。
所以现在只要用on方法就可以了,推荐用on方法进行委托或常规绑定事件。
原文:
事件冒泡机制与委托机制
js事件冒泡和事件委托
DOM Level 2 Event与jQuery源码:捕获与冒泡
父子元素阻止冒泡事件
- 事件冒泡机制与委托机制,jQuery动态绑定
- jquery开发:事件冒泡机制与委托机制,jQuery动态绑定
- jQuery事件委托机制
- jQuery的事件委托机制和事件绑定的区别
- JQuery事件冒泡机制与解决
- JQuery事件冒泡机制与解决
- jQuery事件冒泡机制与解决
- jquery开发:jquery事件绑定解绑机制
- jQuery事件绑定机制完整版
- jQuery事件-委托机制、事件对象
- jQuery的事件绑定与事件委托
- jQuery事件绑定与事件委托
- Jquery事件、冒泡、委托与节点
- 根据jquery解密js事件委托机制
- JQuery事件----冒泡机制的思考
- JQuery事件----冒泡机制的思考
- jQuery新的事件绑定机制on()
- jQuery新的事件绑定机制on()
- Tinker -- 微信Android热补丁方案 常见问题
- 用angularJS写一个递归树
- JavaScript兼容的获取"XMLHTTP"控件+
- Android新特性介绍,ConstraintLayout完全解析
- android leakCanary检测内存泄露
- jquery开发:事件冒泡机制与委托机制,jQuery动态绑定
- 你有多少弱点,就有多少失败的可能
- 特征点提取-图像处理
- android studio 编写JNI时碰到的一些错误
- 第一个JS--100以内的加减法
- 1840: 挂盐水
- javase练习(排序,IO流,机试,综合)
- c++ 构造函数,拷贝构造函数,析构函数与赋值操作符
- hashcode小结