js循環綁定事件解決方案

時間 2019-11-12

標籤循環綁定事件解決方案欄目 JavaScript 简体版

原文原文鏈接

相信你們都遇到過相似的問題，for循環綁定完事件最後執行的時候都是最後一個事件相同，好比這段代碼
java

Java代碼閉包

<body> spa
<ul id="list"> blog
<li>1</li> 事件
<li>2</li> ip
<li>3</li> get
<li>4</li> it
<li>5</li> io
</ul> for循環
<script>
var list_obj = document.getElementsByTagName('li');
for (var i = 0; i <= list_obj.length; i++) {
list_obj[i].onclick = function() {
alert(i);
}
}
</script>
</body>

點擊的時候彈出的不是0 1 2 3 4，而是5。

解決方案也不少種，好比能夠新建一個function設置一個私有方法，而後每次new一個object而後再綁定到它的方法上。
還有就是閉包，寫法相對簡單：

Java代碼

<body>
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
var list_obj = document.getElementsByTagName('li');
for (var i = 0; i <= list_obj.length; i++) {
(function(){
var p = i
list_obj[i].onclick = function() {
alert(p);
}
})();
}
</script>
</body>

就是每一個循環加上閉包，而後設置一個臨時變量，問題解決。

相關文章

相關標籤/搜索

解決方案二

解決方案七

5種解決方案

解決方案十八

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<