這是一個非常常見的面試題，出題方式多樣，但考察點相同，下面我們來看看這幾種方法：
方法一：

var itemli = document.getElementsByTagName("li");

for(var i = 0; i<itemli.length; i++){

　　　　itemli[i].index = i; //給每個li定義一個屬性索引值

　　　　itemli[i].onclick = function(){

　　　　　　alert(this.index+this.innerHTML); 

　　　　}

}

方法二：

var itemli = document.getElementsByTagName("li");

 
for(var i = 0; i<itemli.length; i++){

　　　(function(n){

　　itemli[i].onclick = function(){

　　　　　　alert(n+itemli[n].innerHTML); 

　　　　　}

　　})(i)

}

方法三：

var itemli = document.getElementsByTagName("li");

for(var i = 0; i<itemli.length; i++){
itemli[i].onclick = function(n){
　　　　
 
return function(){
alert(n+itemli[n].innerHTML); 
}
　　}(i)
}

方法四：

$("ul li").click(function(){
var item = $(this).index(); //獲取索引下標 也從0開始
var textword = $(this).text(); //文本內容
alert(item+textword);
})

上面這四種方法都可以實現循環綁定，但是我們知道，頻繁的操作DOM是非常消耗性能的，如果有1000個li，怎麽辦呢？我們還有另一種思路，事件代理，又稱事件委托。簡單的來講就是利用JS中事件的冒泡屬性，把原本需要綁定的事件委托給父元素，讓父元素擔當事件監聽的職務。下面我們來看看。

方法五（JS事件代理）：

var ul = document.querySelector("ul");
　　ulItem.onclick = function (e) {
　　e = e || window.event; //這一行及下一行是為兼容IE8及以下版本
　　var target = e.target || e.srcElement;
　　if (target.tagName.toLowerCase() === "li") {
　　　　var li = this.querySelectorAll("li");
　　　　index = Array.prototype.indexOf.call(li, target);
　　　　alert(target.innerHTML + index);
　　}
}

上述代碼中，為什麽需要 “index = Array.prototype.indexOf.call(li,target);” 這樣使用數組的indexOf方法呢，這是因為querySelectorAll方法獲取到的元素列表不是數組，和函數的arguments一樣是一種類數組類型，不可以直接使用數組的方法。

方法六（jQuery事件代理）：

$(document).ready(function () {
　　$("ul").on("click", function (event) {
　　var target = $(event.target);
　　alert(target.html() + target.index())
});

JS如何給ul下的所有li綁定點擊事件，點擊使其彈出下標和內容