Javascript動態綁定事件的簡單實現代碼

下面是頁面的dom結構 複製代碼 代碼如下:<ul id="test">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>

下面是javascript代碼 複製代碼 代碼如下://根據ID擷取對象
function id(v) { return document.getElementById(v); }

//根據標記擷取對象
function tag(element, t) { return element.getElementsByTagName(t); }

window.onload = function() {
//擷取test下的所有li對象
var li = tag(id("test"), "li");

//用迴圈綁定按一下滑鼠事件
for(var i=0; i<li.length; i++) {
li[i].onclick = function() {
//期望彈出1,2,3,4
//結果彈出的總是5
alert("你點擊了第" + (i+1) + "項");
}
}
}

為什麼會出現上邊的現像呢？原因是“for中的事件綁定並沒有馬上得到執行”。修改後的代碼如下： 複製代碼 代碼如下://根據ID擷取對象
function id(v) { return document.getElementById(v); }

//根據標記擷取對象
function tag(element, t) { return element.getElementsByTagName(t); }

window.onload = function() {
//擷取test下的所有li對象
var li = tag(id("test"), "li");

//用迴圈綁定按一下滑鼠事件
for(var i=0; i<li.length; i++) {
(function() {
var t = i
li[i].onclick = function() {
alert("你點擊了第" + t + "項");
}
})();
}
}

測試代碼，一切OK，我們正常的將迴圈變數i傳到onclick事件對應的處理函數中。