3

私の問題は、長方形の複数のイベントを処理する必要があることです。それは単純に聞こえます、例えばこれはうまくいきます

  node.click(function(e){
     click(); // this is function defined in same scope, it works ok
  });

  node.mouseout(function(e){
     mouseout();  
  });

しかし、これを自動化したいので、次のようになります。

var events = new Array("click", "mouseout");
for(var i in events){
     node[events[i]](function(e){
         events[i](); /*THIS is problem, no matter if it is click or mouseout
                        this always fires function with same name as last item
                        in events array (in this case mouseout) 
                      */
     }
}

なぜ私がそれを解決する必要があるのか​​、あなたは何か考えがありますか？

4

1 に答える 1

1

ループで作成されたハンドラーは変数を共有しています。それらが呼び出されるまでに、変数はループの最後の値になります。

各ハンドラーが共有変数の個別のコピーを取得するように、「クロージャーの凍結」と呼ばれる手法を使用する必要があります。あなたの場合、変化する共有変数はi

あなたの他の問題は、文字列から関数「クリック/マウスアウト」を呼び出す必要があるため、関数へのハンドルを取得する必要があることです。現在、コードは機能"hello"()しない呼び出しを試みています

最後の問題 (ただし、まだバグではありません) は、Array コンストラクターを使用してはならず、for inループを使用して配列を反復処理してはならないことです。

function createHandler(eventName) {
    return function(e) {
        window[eventName]();
    }
}

var events = ["click", "mouseout"];
for(var i=0; i < events.length; i++){
     node[events[i]](createHandler(events[i]));
}

上記の例は理解しやすいですが、自己呼び出しの匿名関数を使用して同じことを行うことができます

var events = ["click", "mouseout"];
for(var i=0; i < events.length; i++){
     node[events[i]]((function(eventName){
         return function(e) {
             window[eventName]();
         };
     })(events[i]));
}
于 2012-12-14T20:29:40.237 に答える