事件委托:利用冒泡的原理把实践添加到父元素级别上，触发执行效果。
时间委托优点：
1.提高性能，不用for循环遍历所有li，节省性能。
2.新添加的元素还会有原来之前的事件。
先看时间委托提高的性能吧，一个常见的效果，鼠标经过<li>列表背景变红，鼠标移走取消背景色。下面代码是没使用时间委托：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>testcss</title>
<style>
</style>
<script type="text/javascript">
window.onload=function(){
var oul=document.getElementsByTagName('ul')[0];
var oli=oul.getElementsByTagName('li');
for(var i=0;i<oli.length;i++)
{
oli[i].onmouseover=function(){
this.style.background='red';
};
oli[i].onmouseout=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.onmouseover=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.onmouseout=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.onload=function(){
var oul=document.getElementsByTagName('ul')[0];
var oli=oul.getElementsByTagName('li');
var oinput=document.getElementById('input1');
oinput.onclick=function(){ //点击按钮插入新<li>标签
var oli=document.createElement('li');
oli.innerHTML='我是新标签'; //注意：此句代码应写在appendChild()前面，能节省性能
oul.appendChild(oli);
};
oul.onmouseover=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.onmouseout=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>以上代码运行效果如下图所示，新插入的标签依然与生俱来之前的事件：
