js事件冒泡和事件委托

2022-11-21 13:23:31

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()方法，可以说是一步步改进，

.bind() 
假设有一个多行多列的表格，我们想让用户单击每个单元格都能看到与其中内容相关的更多信息（比如，通过提示条）。为此，可以为每个单元格都绑定click事件： 

$("info_table td").bind("click", function(){/*显示更多信息*/}); 
问题是，如果表格中要绑定单击事件的有10列500行，那么查找和遍历5000个单元格会导致脚本执行速度明显变慢，而保存5000个td元素和相应的事件处理程序也会占用大量内存
.live()
事件委托可以解决上述两个问题。具体到代码上，只要用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方法进行委托或常规绑定事件

码农公寓

相关文章