淺談JavaScript之事件綁定_javascript技巧

其實沒有什麼新的知識點，只是為了方便其他有需要的朋友們翻閱，對自己而言也算是一個積累，所以只能算是閒談 JavaScript，老鳥們可以盡情飄過。
在進入正題之前，先提個問題熱身吧。
現在有以下HTML 結構：

複製程式碼

複製程式碼

程式碼

 
 

 
 

以及如下JavaScript 代碼：

複製代碼

程式碼如下:


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

    inputs[i].onclick = function () {
       >

請問，這樣執行的結果是什麼？
/***************************分割線***************** **********/如果你的回答是“點擊按鈕時， alert 當前按鈕的索引值 i”，那你就中了我的圈套了。大家不妨試試，無論你點擊哪個按鈕，它都會alert(5)。

這個看似理所當然的結果為什麼會和實際情況不同呢？其實也是很好理解的。
因為onclick 只是事件綁定，而不是執行，當我們執行onclick 事件的時候，這時的i 已經是循環以後的值了，照這樣看，每個按鈕都alert(5) 也就不足為奇奇了。

那麼，如果我們要怎麼實現「點擊按鈕時，alert 當前按鈕的索引值 i」呢？這裡就要用到 JavaScript 中暗藏玄機的一個概念「閉包」。我們可以用閉包的方式改寫以上JS，把for 迴圈中的i 值存到記憶體中，
程式碼如下：

複製程式碼 程式碼如下:

var wrap = document.getElementById('wrap'),
    inputs = wrap.getElementsByTagName('in  inputs = wrap.getElementsByTagName
for (var i = 0, l = inputs.length; i     (function (cur) {
       cur);
        }
    })(i)
}



再試效果？

確實能 alert 出對應的索引值了，不過至此為止還只是開胃菜，正題才剛開始！
以上的方法，我們是透過循環閉包給button 按鈕上綁定事件，我們知道，在JavaScript 中函數也是對象，對象就會佔用內存，現在的例子中只有5 個按鈕，或許你會認為這樣的效能開銷可以忽略不計，但是如果當我們有50個，甚至500 個按鈕的時候，IE 已經哭了，當有更多其他效能隱患並發時，所有的瀏覽器都哭了。 回到剛才的例子，我們可以用「事件委託」的方法來解決這個因綁定事件隨著按鈕增加而可能導致的效能問題。原理很簡單，利用Javascript 的事件冒泡，我們可以把事件的綁定從按鈕移到它們的父級元素上，不管按鈕有多少，它們只有一個共同的父級元素，這樣我們只需要綁定一次事件就可以了。

程式碼如下：

複製程式碼 程式碼如下:

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

wrap.onclick = function (onclick)> var ev = ev || window.event,
    target = ev.target || ev.srcElement;
    for (var i = 0, l = inputs.length; i if (inputs[i] === target) {
            alert(i)
        }
一下，來些餐後甜點。
除了在效能上，事件委託比閉包的事件綁定更有優勢以外，事件委託還無需顧及子元素（即被綁定事件的元素）的數量。例如，我們在onclick 事件綁定以後，
增加一個按鈕：

複製程式碼

程式碼如下:var newInput = document.createElement('input'); newInput.setAttribute('type', 'button'); newInput.setAttribute('type', 'button');

newInput.setAttribute('value', '六value', '六value', '六value', '六value', '六個按鈕');

wrap.appendChild(newInput);


同樣在最後加了這段程式碼的閉包方式和事件委託方式，我們可以看到，閉包實現的事件綁定中點擊「按鈕六」毫無效果，但是在事件委託中實現的事件綁定點擊「按鈕六」則會有alert。相反，如果我們要刪除一個按鈕，閉包的方式仍會在內存中保存已刪除按鈕的onclick 事件（除非手動設為null），事件委託則不會對內存造成多餘的負擔，就為此原因，我們也應該多加利用事件委託的方式來綁定同一層級的多個元素。