javascript循环添加事件,总是获取最后一个值

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>javaScript 循环添加事件</title> <link href="" rel="stylesheet" type="text/css" /> <mce:script type="text/javascript" src=""></mce:script> <mce:style type="text/css"><!-- --></mce:style><style type="text/css" mce_bogus="1"></style> <mce:script type="text/javascript"><!-- window.onload = function(){ for(var i=0; i<6; i++){ var alink = document.createElement('a'); var titleText = document.createTextNode(' ' + (i+1) + ' '); alink.appendChild(titleText); alink.href = "javascript:void(0)"; alink.onclick = function(){alert(i)}; var div = document.getElementById('show-detail'); div.appendChild(alink); } } // --></mce:script> </head> <body> <div id="wrap"> <div id="show-detail"></div> </div> </body> </html>

这是一组link,你会发现每点击一下,结果总是6。WHY? 这是javascript闭包特性所引起,想了解请google。

解决问题:使用代理方法

添加下面代码:

[javascript:nogutter] view plain copy print ?
  1. function delegate(fn,params,obj){
  2. return function(){
  3. fn.call(obj||window,params);
  4. }
  5. }
function delegate(fn,params,obj){ return function(){ fn.call(obj||window,params); } }

再将 : alink.onclick = function(){alert(i)};

改为 :

var pFunc = function(i){alert(i)};
alink.onclick = delegate(pFunc,i,alink);

即可。

你可能感兴趣的:(JavaScript,html,XHTML,function,Google,stylesheet)