0

我对 addEvent（或其他我不知道的东西）有疑问。这是我的代码。
HTML： 

<div style="background-color:red;height:30px;width:30px;" ></div>
<div style="background-color:yellow;height:30px;width:30px;" ></div>

JS： 

function addEvent(elm,ev,fun)//Cross-browser addEvent
{
    if(elm.addEventListener)elm.addEventListener(ev,fun,false);
    else if(elm.attachEvent)
    {
        var r=elm.attachEvent("on"+ev,fun);
        return r;
    }
}

function myFun(x)
{
    alert(x.style.backgroundColor);
}

var allDiv=document.getElementsByTagName("div");
myFun(allDiv[0]);//Here it works
for(var i=0;i<allDiv.length;i++) {
      //But not here when you click the div
      addEvent(allDiv[i],
               "click",function(){
                          myFun(allDiv[i])
                       });
}

我希望警报有效，但不使用 ID 并且不放置内联 onclick。是否可以 ？

http://jsfiddle.net/G9gBS/1/

4

3 回答 3

1

与其将其调用为allDiv[i]，不如将其传递this给回调函数。在调用 onclick 回调时，i超出范围且无法通过allDiv[i]. 回调在调用的上下文中调用<div>，由 引用this。

for(var i=0; i<allDiv.length; i++) {
      addEvent(allDiv[i], "click", function() {
         // allDiv[i] is out of scope in the callback.  Use this instead.
         myFun(this);
      });
}

更新了 jsFiddle。

于 2012-05-07T12:44:07.677 回答
1

改变

for(var i=0;i<allDiv.length;i++)addEvent(allDiv[i],"click",function(){myFun(allDiv[i])});

到

for(var i=0;i<allDiv.length;i++)addEvent(allDiv[i],"click",function(){myFun(this)});

如果我想访问 i onclick，我应该传递什么作为参数？

像这样，是一种方式（另一种是使用绑定）：

for(var i=0;i<allDiv.length;i++){
    var bob = i;
    addEvent(allDiv[i],"click",function(){
                               alert(bob);
                               myFun(this,bob);
    });
}
于 2012-05-07T12:49:57.330 回答
1

在 JavaScript 中使用闭包时，你陷入了一个常见的陷阱。我已关闭，但所有点击函数的更改都在调用 myFunc，allDiv[allDiv.length -1]您可以使用自执行函数来解决这个问题

for(var i=0;i<allDiv.length;i++) {
          addEvent(allDiv[i],
                   "click",(function(j) {
                              return function(){
                                       myFun(allDiv[j])
                                     }
                            }(i)));
}

这不再关闭 i（在分配给点击事件的函数中从未引用 i）。

但是在这种特殊情况下，您可以简单地传递它。在触发事件的元素的上下文中调用事件处理程序，以便您可以执行

for(var i=0;i<allDiv.length;i++) {
              addEvent(allDiv[i],
                       "click",function(){myFun(this)});
}

甚至更短的使用 jQuery

var myFun function(x)
{
    alert(x.style.backgroundColor);
}

$("div").click(myFun);
于 2012-05-07T12:51:23.833 回答