Javascript動態(tài)綁定事件的簡單實現代碼
更新時間：2010年12月25日 22:37:55 作者：
Javascript事件綁定的方法很多，很靈活。不過，作為比較簡單的動態(tài)綁定，下面的代碼看似正確，但得不到預期的效果。
下面是頁面的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下的所有l(wèi)i對象
var li = tag(id("test"), "li");
//用循環(huán)綁定鼠標單擊事件
for(var i=0; i<li.length; i++) {
li[i].onclick = function() {
//期望彈出1,2,3,4
//結果彈出的總是5
alert("你點擊了第" + (i+1) + "項");
}
}
}
為什么會出現上邊的現像呢？原因是“for中的事件綁定并沒有馬上得到執(zhí)行”。修改后的代碼如下：
//根據ID獲取對象
function id(v) { return document.getElementById(v); }
//根據標記獲取對象
function tag(element, t) { return element.getElementsByTagName(t); }
window.onload = function() {
//獲取test下的所有l(wèi)i對象
var li = tag(id("test"), "li");
//用循環(huán)綁定鼠標單擊事件
for(var i=0; i<li.length; i++) {
(function() {
var t = i
li[i].onclick = function() {
alert("你點擊了第" + t + "項");
}
})();
}
}
測試代碼，一切OK，我們正常的將循環(huán)變量i傳到onclick事件對應的處理函數中。
復制代碼 代碼如下:
<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下的所有l(wèi)i對象
var li = tag(id("test"), "li");
//用循環(huán)綁定鼠標單擊事件
for(var i=0; i<li.length; i++) {
li[i].onclick = function() {
//期望彈出1,2,3,4
//結果彈出的總是5
alert("你點擊了第" + (i+1) + "項");
}
}
}
為什么會出現上邊的現像呢？原因是“for中的事件綁定并沒有馬上得到執(zhí)行”。修改后的代碼如下：
復制代碼 代碼如下:
//根據ID獲取對象
function id(v) { return document.getElementById(v); }
//根據標記獲取對象
function tag(element, t) { return element.getElementsByTagName(t); }
window.onload = function() {
//獲取test下的所有l(wèi)i對象
var li = tag(id("test"), "li");
//用循環(huán)綁定鼠標單擊事件
for(var i=0; i<li.length; i++) {
(function() {
var t = i
li[i].onclick = function() {
alert("你點擊了第" + t + "項");
}
})();
}
}
測試代碼，一切OK，我們正常的將循環(huán)變量i傳到onclick事件對應的處理函數中。
相關文章
這篇文章主要介紹了JS模板編譯的實現詳情，編譯是一種格式變成另一種格式的過程。編譯會導致好的結果，比如書寫簡單的代碼，編譯出來復雜的代碼；或者提高代碼的使用性能2022-07-07
這篇文章主要為大家介紹了以fetch為例詳解如何消除js異步的傳染性示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-12-12
今天小編就為大家分享一篇layui 富文本賦值，取值，取純文本值的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JavaScript中json數組查找數據的幾種方式(含模糊查找)
這篇文章主要給大家介紹了關于JavaScript中json數組查找數據的幾種方式,文中包括模糊查找,文中給出了詳細的代碼示例,對大家學習或者使用json具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
在JavaScript中,我們可以實現燈光閃爍效果,本文主要用到了?setInterval?和?clearInterval?兩個重要方法,感興趣的小伙伴可以了解一下2025-02-02
兼容ie、firefox的圖片自動縮放的css跟js代碼分享
最近編輯反應，圖片有時候太大了，如果隱藏了，可能部分內容別人就看不到了，如果手工設置圖片大小又太麻煩了，這里就提供一個方法讓也沒的圖片等比例縮放2013-08-08
在JavaScript中自定義事件的用法是前端開發(fā)中一個較為高級的話題,它允許開發(fā)者創(chuàng)建和觸發(fā)自己的事件,從而達到更好的模塊化和代碼解耦,這篇文章主要介紹了JavaScript中自定義事件的相關資料,需要的朋友可以參考下2025-04-04
要在 JavaScript 中實現一個按照貝塞爾曲線運動的小球,關鍵是要掌握貝塞爾公式的基本原理和實現方式,以及使用 JavaScript 處理動畫和物理運算,感興趣的小伙伴跟著小編一起來看看吧2024-10-10
js中將HTMLCollection/NodeList/偽數組轉換成數組的代碼
js中將HTMLCollection/NodeList/偽數組轉換成數組的代碼，需要的朋友可以參考下。2011-07-07
這篇文章主要介紹了JavaScript實現數字數組正序排列的方法,涉及javascript中sort方法的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04