Question

我遇到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/

Answer 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);
      });
}

Updated jsFiddle.

Answer 2

更改

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);
    });
}

Answer 3

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

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

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

在这个特殊情况下，你可以简单地通过这个。在触发事件的元素的上下文中调用事件处理程序，以便您可以执行

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);

引用没有ID的div

3 个答案: