其實(shí)沒(méi)有什么新的知識(shí)點(diǎn)，只是為了方便其他有需要的朋友們翻閱，對(duì)自己而言也算是一個(gè)積累，所以只能算是閑談 JavaScript，老鳥(niǎo)們可以盡情飄過(guò)。

在進(jìn)入正題之前，先提個(gè)問(wèn)題熱熱身吧。

現(xiàn)在有如下 HTML 結(jié)構(gòu)：

<div id="wrap">  
 <input type="button" value="按鈕一" />  
 <input type="button" value="按鈕二" />  
 <input type="button" value="按鈕三" />  
 <input type="button" value="按鈕四" />  
 <input type="button" value="按鈕五" />  
</div>  

以及如下 JavaScript 代碼：

var wrap = document.getElementById('wrap'),   
    inputs = wrap.getElementsByTagName('input');   

for (var i = 0, l = inputs.length; i <l; i++) {   
    inputs[i].onclick = function () {   
        alert(i);   
    }   
}  

請(qǐng)問(wèn)，這樣執(zhí)行的結(jié)果是什么？

/ 分割線 /

如果你的回答是 “點(diǎn)擊按鈕時(shí)， alert 當(dāng)前按鈕的索引值 i”，那你就中了我的圈套了。大家不妨試試，無(wú)論你點(diǎn)擊哪個(gè)按鈕，它都會(huì) alert(5)。

這個(gè)看似理所當(dāng)然的結(jié)果為什么會(huì)和實(shí)際情況不同呢？其實(shí)也是很好理解的。 因?yàn)?onclick 只是事件綁定，而不是執(zhí)行，當(dāng)我們執(zhí)行 onclick 事件的時(shí)候，這時(shí)的 i 已經(jīng)是循環(huán)以后的值了，照這樣看，每個(gè)按鈕都 alert(5) 也就不足為奇了。

那么，如果我們要怎么實(shí)現(xiàn) “點(diǎn)擊按鈕時(shí)，alert 當(dāng)前按鈕的索引值 i” 呢？這里就要用到 JavaScript 中暗藏玄機(jī)的一個(gè)概念 “閉包”。我們可以用閉包的方式改寫(xiě)以上 JS，把 for 循環(huán)中的 i 值保存在內(nèi)存中，代碼如下：

var wrap = document.getElementById('wrap'),   
    inputs = wrap.getElementsByTagName('input');   

for (var i = 0, l = inputs.length; i <l; i++) {   
    (function (cur) {   
        inputs[cur].onclick = function () {   
            alert(cur);   
        }   
    })(i)   
}  

再試試效果？確實(shí)能 alert 出相應(yīng)的索引值了，不過(guò)至此為止還只是開(kāi)胃菜，正題才剛剛開(kāi)始！

以上的方法，我們是通過(guò)循環(huán) + 閉包給 button 按鈕上綁定事件，我們知道，在 JavaScript 中函數(shù)也是對(duì)象，對(duì)象就會(huì)占用內(nèi)存，現(xiàn)在的例子中只有 5 個(gè)按鈕，或許你會(huì)認(rèn)為這樣的性能開(kāi)銷(xiāo)可以忽略不計(jì)，但是如果當(dāng)我們有 50 個(gè)，甚至 500 個(gè)按鈕的時(shí)候，IE 已經(jīng)哭了，當(dāng)有更多其他性能隱患并發(fā)時(shí)，所有的瀏覽器都哭了。

回到剛才的例子，我們可以用 “事件委托” 的方法來(lái)解決這個(gè)因綁定事件隨著按鈕增加而可能導(dǎo)致的性能問(wèn)題。原理很簡(jiǎn)單，利用 Javascript 的事件冒泡，我們可以把事件的綁定從按鈕移到它們的父級(jí)元素上，不管按鈕有多少，它們只有一個(gè)共同的父級(jí)元素，那樣我們只需要綁定一次事件就可以了。

代碼如下：

var wrap = document.getElementById('wrap'),   
    inputs = wrap.getElementsByTagName('input');   

wrap.onclick = function (ev) {   
    var ev = ev || window.event,   
    target = ev.target || ev.srcElement;   
    for (var i = 0, l = inputs.length; i <l; i++) {   
        if (inputs[i] === target) {   
            alert(i)   
        }   
    }   
}  

至此，正餐完畢，我們還可以再深入一下，來(lái)些餐后甜點(diǎn)。

除了在性能上，事件委托比閉包的事件綁定更有優(yōu)勢(shì)以外，事件委托還無(wú)需顧及子元素（即被綁定事件的元素）的數(shù)量。比如，我們?cè)?onclick 事件綁定以后，增加一個(gè)按鈕：

var newInput = document.createElement('input');   
newInput.setAttribute('type', 'button');   
newInput.setAttribute('value', '按鈕六');   
wrap.appendChild(newInput);  

同樣在最后加了這段代碼的閉包方式和事件委托方式，我們可以看到，閉包實(shí)現(xiàn)的事件綁定中點(diǎn)擊 “按鈕六” 毫無(wú)效果，但是在事件委托中實(shí)現(xiàn)的事件綁定點(diǎn)擊 “按鈕六” 則會(huì)有 alert。相反，如果我們要?jiǎng)h除一個(gè)按鈕，閉包的方式仍會(huì)在內(nèi)存中保存已刪除按鈕的 onclick 事件（除非手動(dòng)設(shè)為 null），事件委托則不會(huì)對(duì)內(nèi)存造成多余的負(fù)擔(dān)，就為這個(gè)原因，我們也應(yīng)該多加利用事件委托的方式來(lái)綁定同一層級(jí)的多個(gè)元素。