javascript點擊彈出指定行的內容

對於校招來講，前端面試很容易會問到這樣一道基礎題：

給出一個表格，表格有不少行，請用javascript實現點擊某一行彈出其內容。

對於這道題，估計會有些想我這樣的新手小白會給出這樣的答案：

//經過標籤名獲取全部的tr數組
var tr_list = document.getElementsByTagName("tr");
//循環數組添加點擊事件並監聽
for(var i=0;i<tr_list.length;i++){
    tr_list[i].onclick = function(){
        alert(tr_list[i].innerText);
    }
}

但這樣並不會達到想要的效果，而是會報錯，由於這裏面其實包含了一個循環變量泄漏爲全局變量的問題。上面代碼中，變量i是var聲明的，在全局範圍內都有效。因此每一次循環，新的i值都會覆蓋舊值，致使最後i的值爲tr_list.length，因此tr_list[i]這裏會出錯。

關於解決方案有如下幾種：

1. 將alert(tr_list[i].innerText)中的tr_list[i]改成this：

　　

var tr_list = document.getElementsByTagName("tr");
for(var i=0;i<tr_list.length;i++){
    tr_list[i].onclick = function(){
        alert(this.innerText);
    }
}

2. 使用ES6中的let替換var：

var tr_list = document.getElementsByTagName("tr");
for(let i=0;i<tr_list.length;i++){
    tr_list[i].onclick = function(){
        alert(tr_list[i].innerText);
    }
}

3. 使用閉包：

var tr_list = document.getElementsByTagName("tr");
for(var i=0;i<tr_list.length;i++){
    tr_list[i].onclick = function(i){
        return function(e){
            alert(tr_list[i].innerText);
        }
    }(i);
}

4. 使用事件委託：

var tr_list= document.getElementById("table");
tr_list.onclick = function(event){
    alert(event.target.innerText);
}

注意：上面的幾種方法都須要把js代碼放在表格的下方纔可