事件委托:利用冒泡的原理把实践添加到父元素级别上，触发执行效果。
时间委托优点：
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是兼容IEvar 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是兼容IEvar 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>
