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]に渡します。thisonclick コールバックが呼び出された時点で、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 にアクセスしたい場合、パラメータとして何を渡せばよいでしょうか?

そのように、1つの方法です（別の方法はバインドを使用することです）：

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 に答える