现在位置首页 / 前端开发 /正文

js事件冒泡和事件委托

作者: IT小兵 | 2015年10月28日| 热度:℃ | 评论: |参与:

js事件冒泡

js所谓的事件冒泡就是子级元素的某个事件被触发,它的上级元素的该事件也被递归执行

html:

<ul class="clearfix" data-type="cityPick"> 
    <li class="active_sort_opts" data-id="0">全部</li> 
    <li data-id="88">纽约</li> 
    <li data-id="119">洛杉矶</li> 
    <li data-id="138">拉斯维加斯</li> 
    <li data-id="84">夏威夷</li> 
    <li data-id="120">旧金山</li> 
    <li data-id="105">奥兰多</li> 
    <li data-id="118">西雅图</li> 
</ul>

js:

$("ul[data-type='cityPick']").on('click',function(){ 
    alert("父元素ul被点击"); 
}); 
$("ul[data-type='cityPick']").on('click','li',function(){ 
    alert("子元素li被点击"); 
});

当li的点击事件被触发时,父级ul的点击事件也被触发执行了,

而在某些场合我们是不希望它冒泡的,怎么做呢? 简单!

js:

$("ul[data-type='cityPick']").on('click',function(){ 
    alert("父元素ul被点击"); 
}); 
$("ul[data-type='cityPick']").on('click','li',function(e){ 
    e.stopPropagation();//阻止冒泡 
    alert("子元素li被点击"); 
});
加上e.stopPropagation(); 这一句便可以阻止事件冒泡了
js事件委托
js事件委托,其实是使用了冒泡的原理,从点击的元素开始,递归方式的向父元素传播事件,这样做的好处是对于大量要处理的元素,不必为每个元素都绑定事件,只需要在他们的父元素上绑定一次即可,提高性能。 还有一个好处就是可以处理动态插入dom中的元素,直接绑定的方式是不行的。
就是事件目标自身不处理事件,而是把处理任务委托给其父元素或者祖先元素,甚至根元素事件委托很好地利用了"事件冒泡"。当点击子元素,根据"事件冒泡",该子元素的父级元素捕获了该次点击事件,并触发自己的方法。
看实例:
假如现在有10个按钮,要为每个按钮绑定一个click事件,可能才十个按钮,你可以一个一个的绑定或用循环进行绑定,但是这样性能呢?
html:
<div class="button-group">
        <bottoun type="button" class="btn">提交</bottoun>
        <bottoun type="button" class="btn">提交</bottoun>
        <bottoun type="button" class="btn">提交</bottoun>
        <bottoun type="button" class="btn">提交</bottoun>
        <bottoun type="button" class="btn">提交</bottoun>
        <bottoun type="button" class="btn">提交</bottoun>
        <bottoun type="button" class="btn">提交</bottoun>
        <bottoun type="button" class="btn">提交</bottoun>
        <bottoun type="button" class="btn">提交</bottoun>
        <bottoun type="button" class="btn">提交</bottoun>
    </div>

js:

$(".button-group").on('click','.btn',function(){
      alert($(this).html());
});

这里可以看出,我们只是为所有的button的一个父级绑定了click事件,而不是为所有的button绑定事件,极大的提高了性能,这样做的好处还有可以对动态加进来的元素进行处理

就是有一个按钮原本的dom里面是没有的,是你通过其他方式添加进来的,即未来元素,用直接绑定方法是不能成功的,只能用事件委托,委托给该元素的父级进行处理

由于事件委托是通过事件冒泡实现的,所以如果子级的元素阻止了事件冒泡,那么事件委托也将失效!

其实jQueryjQuery 1.7 Beta 1之前版本为绑定和委托事件提供了.bind()、.live()和.delegate()方法,可以说是一步步改进,
 
假设有一个多行多列的表格,我们想让用户单击每个单元格都能看到与其中内容相关的更多信息(比如,通过提示条)。为此,可以为每个单元格都绑定click事件: 
$("info_table td").bind("click", function(){/*显示更多信息*/}); 
问题是,如果表格中要绑定单击事件的有10列500行,那么查找和遍历5000个单元格会导致脚本执行速度明显变慢,而保存5000个td元素和相应的事件处理程序也会占用大量内存
事件委托可以解决上述两个问题。具体到代码上,只要用jQuery 1.3新增的.live()方法代替.bind()方法即可: 
$("#info_table td").live("click",function(){/*显示更多信息*/}); 
这里的.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()方法时配合使用一个上下文参数: 
$("td",$("#info_table")[0]).live("click",function(){/*显示更多信息*/});
这样,“受托方”就从默认的$(document)变成了$("#infotable")[0],节省了冒泡的旅程。
.delegate() 
如前所述,为了突破单一.bind()方法的局限性,实现事件委托,jQuery 1.3引入了.live()方法。后来,为解决“事件传播链”过长的问题,jQuery 1.4又支持为.live()方法指定上下文对象。而为了解决无谓生成元素集合的问题,jQuery 1.4.2干脆直接引入了一个新方法.delegate()。 
使用.delegate(),前面的例子可以这样写: 
$("#info_table").delegate("td","click",function(){/*显示更多信息*/}); 
jQuery 1.7为了解决.bind()、.live()和.delegate()并存造成的不一致性问题,将会增加一对新的事件方法:.on()和.off():
$(elems).on(events, selector, data, fn);
$(elems).off(events, selector, fn);
如果指定selector,则为事件委托;否则,就是常规绑定。
所以现在只要用on方法就可以了,推荐用on方法进行委托或常规绑定事件


点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询