js作用域问题

例如：

for(var i = 0; i < _msg.length; i++){
    var _div = document.createElement('<div>');
    var _a = document.createElement('<span>');
    _a.style.cursor="pointer";
    _a.innerText = _msg[i].title;
    _a.style.textDecoration ='underline';
    _a.attachEvent('onclick',function(){
     window.open(_a.id);
    });
    _a.attachEvent('onmouseover',function(){
     _a.style.color="red";
    });
    _a.attachEvent('onmouseout',function(){
     _a.style.color="#000000";
    });
    _a.id = 'http://<%=request.getLocalAddr()%>:8890/itsm/kb/kbAction.action?processObject.id='+ _msg[i].proObjId +'&processObject.working=false&form.id=kb_query_form&isPrint=1';
    _div.appendChild (_a);
    document.getElementById('kbs').appendChild (_div);
   }

上面这段代码循环创建了N个对象，并注册了相应的事件，但这段代码由于有作用域的问题所以在发生事件的时候，始终是最后一个对象发生作用。

原因：_a实际上是当发生事件的时候才从作用域取出。当事件发生的时候，原来的函数已经执行完毕，因此_a的值等于最后一个，所以就会看到始终是在最后一个对象上起作用。

 

解决方法：

把事件注册移到独立的函数上去，让该函数保存相应的副本。

for(var i = 0; i < _msg.length; i++){
    var _div = document.createElement('<div>');
    var _a = document.createElement('<span>');
    _a.style.cursor="pointer";
    _a.innerText = _msg[i].title;
    _a.style.textDecoration ='underline';
    
    regEvent(_a, "onclick");
    regEvent(_a, "onmouseover", 'red');
    regEvent(_a, "onmouseout", '#000000');
    
    _a.id = 'http://<%=request.getLocalAddr()%>:8890/itsm/kb/kbAction.action?processObject.id='+ _msg[i].proObjId +'&processObject.working=false&form.id=kb_query_form&isPrint=1';
    _div.appendChild (_a);
    document.getElementById('kbs').appendChild (_div);
   }

 

function regEvent(_obj, _eventName, _styleValue){
  if(_styleValue){
   _obj.attachEvent(_eventName, function(){
    setColor(_obj, _styleValue);
   });
  }else{
   _obj.attachEvent(_eventName, function (){
    window.open(_obj.id);
   });
  }
 }
 function setColor(_a, _value){
  _a.style.color = _value;
 }