关于在前端面试中，经常会被技术人员问道在ul标签中有一组li标签，你如何点击每个li并显示相应的内容，最初我的想法是用for循环给每个li添加click事件，然而产生了闭包的效果，为了解决这个问题，我又对代码进行了下面的更改。
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<scripttype="text/javascript">
var li=document.getElementsByTagName("li");
for(var i=0;i<li.length;i++){
(function(x){
li[x].οnclick=function(){
alert(x);
}
})(i);
}
</script>
这样就很好的解决闭包带来的效应，不过这样效率并不是最高的，如果有1000个li标签，难道还要循环个1000遍，这样肯定不行所以利用事件冒泡特性提高效率。主要是利用事件代理。
事件代理（Event Delegation），又称之为事件委托。是 JavaScript 中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务。
<!DOCTYPE html>
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>事件委托</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> </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); } } </script> </body> </html>