下面是頁面的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事件對應的處理函數中。