jquery开发：事件冒泡机制与委托机制，jQuery动态绑定

一、事件的捕获与冒泡

由W3C规定的DOM2标准中，一次事件的完整过程包括三步：捕获→执行目标元素的监听函数→冒泡，在捕获和冒泡阶段，会依次检查途径的每个节点，如果该节点注册了相应的监听函数，则执行监听函数。以下面的HTML结构为例：

<div id="parentdiv">
    父亲
    <div id="childdiv">孩子</div>
</div>
   
1
2
3
4
   
1
2
3
4

执行的流程应该是这样的： 

下面是一组例子，分别点击孩子节点可以清楚的看到第三个参数的影响：

父亲节点的监听函数在捕获阶段执行：

var parent = document.getElementById('parentdiv');
var child = document.getElementById('childdiv');
parent.addEventListener('click',function(){alert('父亲被点击了');},true);//第三个参数为true
child.addEventListener('click',function(){alert('孩子被点击了');},false);
   
1
2
3
4
   
1
2
3
4

孩子父亲节点的监听函数在冒泡阶段执行：

var parent = document.getElementById('parentdiv');
var child = document.getElementById('childdiv');
parent.addEventListener('click',function(){alert('父亲被点击了');},false);//第三个参数为false，默认false
child.addEventListener('click',function(){alert('孩子被点击了');},false);
   
1
2
3
4
   
1
2
3
4

父亲节点的监听函数在捕获冒泡阶段都执行：

var parent = document.getElementById('parentdiv');
var child = document.getElementById('childdiv');
parent.addEventListener('click',function(){alert('父亲被点击了');},true);//第三个参数为true
parent.addEventListener('click',function(){alert('父亲被点击了');},false);//第三个参数为false
child.addEventListener('click',function(){alert('孩子被点击了');},false);
   
1
2
3
4
5
   
1
2
3
4
5

如果不想让事件向上冒泡，可以在监听函数中调用event.stopPrapagation()来完成，这样父亲节点就捕捉不到该事件了。在实际的开发中，这一用处还是挺多的。

js事件冒泡

js所谓的事件冒泡就是子级元素的某个事件被触发，它的上级元素的该事件也被递归执行，jQuery中的事件委托就是用的冒泡。

<ul class="clearfix" id="ulOuter"> 
    <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>
   
1
2
3
4
5
6
7
8
9
10
   
1
2
3
4
5
6
7
8
9
10

$("#ulOuter").on('click',function(){
    alert("父元素ul被点击");
});
$("#ulOuter").on('click','li',function(){
    alert("子元素li被点击");
});
   
1
2
3
4
5
6
   
1
2
3
4
5
6

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

对于通过这种方式绑定的事件实际上是挂载在$('#ulOuter')上的，点击$('#ulOuter')区域后会触发e.target的判断，简单的实现就相当于：

$('.outer').on('click',function(e){
    if(e.target.tagName.toLowerCase()=='li'){   //这里只是简化个例子，实际上应该通过tagName、className等各种不同情况处理的
        // event handle
     }
})
   
1
2
3
4
5
   
1
2
3
4
5

而在某些场合我们是不希望它冒泡的，达到点击 ul 时触发 ul 上（li 外围）的事件处理函数，点击 li 时只触发 li 上的函数而不触发 ul 上的函数的效果，应该将事件委托到 ul 上，然后stopPropagation阻止冒泡：

$("#ulOuter").on('click',function(){ 
    alert("父元素ul被点击"); 
});

$("#ulOuter").on('click','li',function(e){ 
    e.stopPropagation();//阻止冒泡 
    alert("子元素li被点击"); 
});
   
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结构如下：

<ol id="olist">
    <li>列表内容1</li>
    <li>列表内容2</li>
    <li>列表内容3</li>
    <li>列表内容4</li>
    <li>列表内容5</li>
</ol>
   
1
2
3
4
5
6
7
   
1
2
3
4
5
6
7

若我们使用之前的监听器绑定方式，需要遍历所有的li元素并监听，代码应该是这样的：

var listArray = document.getElementById('olist').childNodes;
for(var i=0;i<listArray.length;i++){
    listArray[i].addEventListener('click',function(){
        alert(this.innerText);
    });
}
   
1
2
3
4
5
6
   
1
2
3
4
5
6

运行效果如下：

列表内容1
列表内容2
列表内容3
列表内容4
列表内容5
   
1
2
3
4
5
   
1
2
3
4
5

可以发现当新增元素后，点击它并没有弹出内容。那是当然的了，因为我们并没有给新增的元素绑定监听器，为了实现点击新增元素也弹出内容，我们不得不在每次新增一个元素后，再进行一次绑定。加一个绑一个，加一个绑一个，累不累啊！你不累浏览器都累了！这样做导致的性能开销是可想而知的，而且浏览器还要维系n多元素与应的监听函数的映射关系，会占用大量内存。

面对这样拖沓冗杂的代码，你是不是已经不能忍，来看看使用事件委托的效果，代码如下：

var olist = document.getElementById('olist');
olist.addEventListener('click',function(){
    alert(event.target.innerText);
},false);
   
1
2
3
4
   
1
2
3
4

看看实际运行的效果：

列表内容1
列表内容2
列表内容3
列表内容4
列表内容5
   
1
2
3
4
5
   
1
2
3
4
5

我们并未给li元素绑定任何监听器，而是监听它的父元素ul，等到事件冒泡上来的时候，在处理函数中通过event.target获得触发事件的li元素，进行相关处理。这样做的好处是显而易见的，首先只进行了一次监听器的绑定，浏览器轻松，其次动态增加元素后你也不必要再绑定监听器，你也轻松。正所谓大家好才是真的好！

jQuery事件委托

假如现在有10个按钮，要为每个按钮绑定一个click事件，可能才十个按钮，你可以一个一个的绑定或用循环进行绑定，但是这样性能呢？

<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>

   
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

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

这里可以看出，我们只是为所有的button的一个父级绑定了click事件，而不是为所有的button绑定事件，极大的提高了性能，这样做的好处还有可以对动态加进来的元素进行处理：就是有一个按钮原本的dom里面是没有的，是你通过其他方式添加进来的，即未来元素，用直接绑定方法是不能成功的，只能用事件委托，委托给该元素的父级进行处理。 
由于事件委托是通过事件冒泡实现的，所以如果子级的元素阻止了事件冒泡，那么事件委托也将失效！

其实jQueryjQuery 1.7 Beta 1之前版本为绑定和委托事件提供了.bind()、.live()和.delegate()方法，可以说是一步步改进。

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

$("info_table td").bind("click", function(){/*显示更多信息*/}); 
   
1
   
1

问题是，如果表格中要绑定单击事件的有10列500行，那么查找和遍历5000个单元格会导致脚本执行速度明显变慢，而保存5000个td元素和相应的事件处理程序也会占用大量内存。

.live() 
事件委托可以解决上述两个问题。具体到代码上，只要用jQuery 1.3新增的.live()方法代替.bind()方法即可：

$("#info_table td").live("click",function(){/*显示更多信息*/}); 
   
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()方法时配合使用一个上下文参数：

$("td",$("#info_table")[0]).live("click",function(){/*显示更多信息*/});
   
1
   
1

这样，“受托方”就从默认的$(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(){/*显示更多信息*/}); 
   
1
   
1

jQuery 1.7为了解决.bind()、.live()和.delegate()并存造成的不一致性问题，将会增加一对新的事件方法：.on()和.off()：

$(elems).on(events, selector, data, fn);
$(elems).off(events, selector, fn);
   
1
2
   
1
2

如果指定selector，则为事件委托；否则，就是常规绑定。 
所以现在只要用on方法就可以了，推荐用on方法进行委托或常规绑定事件。

原文： 
事件冒泡机制与委托机制 
js事件冒泡和事件委托 
DOM Level 2 Event与jQuery源码：捕获与冒泡 
父子元素阻止冒泡事件