面試題：一個ul中有一千個li，如何給這一千個li綁定一個鼠標點擊事件，當鼠標點擊時alert出這個li的內容和li的位置坐標xy。
看到這個題目，我們一般首先想到的思路是，for循環，遍歷1000次。這樣的話1000次的循環，效率很低，如何提高。
可以考慮利用事件冒泡特性提高效率。主要是利用事件代理。
事件代理（Event Delegation），又稱之為事件委托。是 JavaScript 中常用綁定事件的常用技巧。顧名思義，“事件代理”即是把原本需要綁定的事件委托給父元素，讓父元素擔當事件監聽的職務。
為什么要這么做？眾所周知，DOM操作是十分消耗性能的，所以重復的事件綁定簡直是性能殺手。而事件代理的核心思想，就是通過盡量少的綁定，去監聽盡量多的事件。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>hehe</title> </head> <body> <div> <ul id="ulItem"> <li id="li1">1</li> <li id="li2">2</li> <li id="li3">3</li> <li id="li4">4</li> <li id="li5">5</li> <li id="li6">6</li> <li id="li7">7</li> <li id="li8">8</li> <li id="li9">9</li> <li id="li10">10</li> <li id="li11">11</li> ... <li id="li1000">1000</li> </ul> </div> <script type="text/javascript"> var ulItem = document.getElementById("ulItem"); ulItem.onclick = function(e){ e = e || window.event;//這一行及下一行是為兼容IE8及以下版本 var target = e.target || e.srcElement; if(target.tagName.toLowerCase() === "li"){ alert(target.innerHTML); alert("位置為："+getElementPosition(target).x+","+getElementPosition(target).y); } } function getElementPosition(e){ var x=0,y=0; while(e != null){ x += e.offsetLeft; y += e.offsetTop; e = e.offsetParent; } return {x:x, y:y}; } </script> </body> </html>