js中的事件委托实际上是指利用事件冒泡机制，将子元素的事件加给（委托）父级元素或是更高级的元素来完成。
事件委托的好处主要有:
1、提高性能。提高性能主要反映为：将子元素多个事件处理转换为一个事件处理，使得占用内存减少，同时节约了处理所需时间。
<ul id="items"> <li>a</li> <li>b</li> <li>c</li> </ul>
question：利用js使得鼠标指向li的时候，该元素背景变红，移开后回复正常
不使用事件委托：
1 window.onload = function(){ 2 var ul = document.getElementById("items"); 3 var lis = ul.getElementsByTagName("li"); 4 5 for(var i=0; i<lis.length; i++){ 6 lis[i].onmouseover = function(){ 7 this.style.background = "red"; 8 } 9 lis[i].onmouseout = function(){ 10 this.style.background = ""; 11 } 12 } 13 }
使用事件委托：
1 window.onload = function(){ 2 var ul = document.getElementById("items"); 3 var lis = ul.getElementsByTagName("li"); 4 5 ul.onmouseover = function(evt){ 6 var evt = evt || window.event; 7 var target = evt.target || evt.srcElement; 8 if (target.nodeName.toLowerCase() == ‘li‘) { 9 target.style.background = "red"; 10 }; 11 } 12 ul.onmouseout = function(evt){ 13 var evt = evt || window.event; 14 var target = evt.target || evt.srcElement; 15 if (target.nodeName.toLowerCase() == ‘li‘) { 16 target.style.background = ""; 17 }; 18 } 19 }
2、为新添加元素默认绑定事件。
具体在上述示例中新添加一个元素标签，并给其绑定一个事件从而添加一个新的li元素。并分别查看是否使用事件委托的新添加元素的效果。
原文：http://www.cnblogs.com/mengxuan/p/4687708.html
