li標籤繫結事件
阿新 • • 發佈：2019-02-11
關於在前端面試中，經常會被技術人員問道在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].onclick=function(){
alert(x);
}
})(i);
}
</script>
這樣就很好的解決閉包帶來的效應，不過這樣效率並不是最高的，如果有1000個li標籤，難道還要迴圈個1000遍，這樣肯定不行所以利用事件冒泡特性提高效率。主要是利用事件代理。
事件代理（Event Delegation），又稱之為事件委託。是 JavaScript 中常用繫結事件的常用技巧。顧名思義，“事件代理”即是把原本需要繫結的事件委託給父元素，讓父元素擔當事件監聽的職務。
<!DOCTYPE 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>