事件委託:利用冒泡的原理把實踐添加到父元素級別上，觸發執行效果。
時間委託優點：
1.提高性能，不用for循環遍歷所有li，節省性能。
2.新添加的元素還會有原來之前的事件。
先看時間委託提高的性能吧，一個常見的效果，鼠標經過<li>列表背景變紅，鼠標移走取消背景色。下面代碼是沒使用時間委託：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>testcss</title>
<style>
</style>
<script type="text/javascript">
window.οnlοad=function(){
var oul=document.getElementsByTagName('ul')[0];
var oli=oul.getElementsByTagName('li');
for(var i=0;i<oli.length;i++)
{
oli[i].οnmοuseοver=function(){
this.style.background='red';
};
oli[i].οnmοuseοut=function(){
this.style.background='';
};
}
}
</script>
</head>
<body>
<input type='button' value='添加' id='input1'/>
<ul>
<li>demo</li>
<li>demo</li>
<li>demo</li>
<li>demo</li>
<li>demo</li>
</ul>
</body>
</html>很顯然那個for循環就是性能的主要浪費者，就這5個<li>標籤還好，倘若有成千上百個呢？使用時間委託就不用考慮這些了：
oul.οnmοuseοver=function(ev){
var ev=ev||window.event; //ev.target代表事件源，事件發生在誰身上誰就是事件源，ev.srcElement是兼容IE
var target=ev.target||ev.srcElement;
<span style="white-space:pre"> </span>//if(target.is("li")) //判斷是否爲li標籤
if(target.nodeName.toLowerCase()=='li')//判斷事件源是否爲<li>，目的是爲排除<ul>,防止鼠標經過“大的”<ul>時發生變色。
{
target.style.background='red';
}
}
oul.οnmοuseοut=function(ev){
var ev=ev||window.event;
var target=ev.target||ev.srcElement;
if(target.nodeName.toLowerCase()=='li')
{
target.style.background='';
}
}這樣就不用使用for循環遍歷了。
第二個優點：新添加的元素還會有原來之前的事件。也就是說用for循環的方法只能對現有的標籤實現效果，對於後來新添加的標籤就不能爲例了，而用時間委託，只要符合之前設定的標籤，那麼新添加的標籤生來就有之前定義的事件效果。下面在網頁中添加一按鈕，點擊按鈕添加一些新的<li>標籤：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>testcss</title>
<style>
</style>
<script type="text/javascript">
window.οnlοad=function(){
var oul=document.getElementsByTagName('ul')[0];
var oli=oul.getElementsByTagName('li');
var oinput=document.getElementById('input1');
oinput.οnclick=function(){ //點擊按鈕插入新<li>標籤
var oli=document.createElement('li');
oli.innerHTML='我是新標籤'; //注意：此句代碼應寫在appendChild()前面，能節省性能
oul.appendChild(oli);
};
oul.οnmοuseοver=function(ev){
var ev=ev||window.event;
//ev.target代表事件源，事件發生在誰身上誰就是事件源，ev.srcElement是兼容IE
var target=ev.target||ev.srcElement;
if(target.nodeName.toLowerCase()=='li')
{
target.style.background='red';
}
}
oul.οnmοuseοut=function(ev){
var ev=ev||window.event;
var target=ev.target||ev.srcElement;
if(target.nodeName.toLowerCase()=='li')
{
target.style.background='';
}
}
}
</script>
</head>
<body>
<input type='button' value='添加' id='input1'/>
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
<li>55</li>
</ul>
</body>
</html>
