Javascript中的事件處理程序范圍
[英]Event handler scope in Javascript
問題描述
這可能是一個簡單的問題，但我無法找到最佳答案。
我在屏幕上有10個<div>元素。 他們每個人都有一個click()事件監聽器：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id="element0">Click me! (0)</div>
<div id="element1">Click me! (1)</div>
<div id="element2">Click me! (2)</div>
<div id="element3">Click me! (3)</div>
<div id="element4">Click me! (4)</div>
<div id="element5">Click me! (5)</div>
<div id="element6">Click me! (6)</div>
<div id="element7">Click me! (7)</div>
<div id="element8">Click me! (8)</div>
<div id="element9">Click me! (9)</div>
<script type="text/javascript">
for ( var i = 0; i < 10; i++ ) {
var element = document.getElementById( "element" + i );
element.onclick = function () {
alert( "Element " + i );
}
}
</script>
</body>
</html>
但每次我點擊一個元素，它就會顯示“元素10”！ 似乎所有這些事件處理程序都為i使用相同的值。
我希望它顯示“元素N”，其中N是當前元素的編號。 我不想從元素id中提取N. 我不想使用jQuery的data()方法存儲它。 我相信這個問題必須有一個更簡單的解決方案，但我找不到它。 任何人？
3 個解決方案
解決方案1
6 已采納 2012-05-18 16:32:26
您在所有點擊處理程序共享的外部作用域中只有一個變量i 。 您需要為每個閉包創建一個局部變量i 。 這將有效：
for ( var i = 0; i < 10; i++ ) {
var element = document.getElementById( "element" + i );
element.onclick = (function(i){
// returns a new function to be used as an onclick handler
return function () {
alert( "Element " + i );
}
})(i); // Pass in the value of the outer scope i
}
檢查“臭名昭著的循環”的問題這篇文章 （和閱讀整條每頁）了解更多信息:)
解決方案2
3 2012-05-18 16:38:25
所以你的問題就是在循環中做異步代碼的本質，就像其他帖子所說的那樣。 在你的情況下，盡管有一個更好的方法來解決這個問題，並使用事件委托。
document.body.onclick = function(e) {
if (e.target.tagName.toLowerCase() === "div") {
alert( "Element " + e.target.id );
}
}
如果你有jQuery，你可以這樣做：
$(document.body).on("click", "div", function() {
alert($(this).attr("id"));
});
有關更多信息，請查看此文章： http ： //www.sitepoint.com/javascript-event-delegation-is-easier-than-you-think/
顯然jQuery和其他libs也會自動處理這些東西。
解決方案3
2 2012-05-18 16:39:43
你可以從元素的id屬性中獲取數字：
for ( var i = 0; i < 10; i++ ) {
var element = document.getElementById( "element" + i );
element.onclick = function () {
var i = this.id.substr(7);
alert( "Element " + i );
}
}
JavaScript事件處理程序范圍和此
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.