Javascript Closure Scopingの問題

Question

cellへの参照を取得しようとしていますが、nullに見えます。私が正しく理解していれば、変数を参照できるはずです。正しい？

$('td[someAttr]').mouseenter(function(cell) { 
    var timeoutId = setTimeout(function() { 
     // what should variable cell be? 
    }, 1000); 
}); 

OR

$('td[someAttr]').mouseenter(function(cell) { 
    var timeoutId = setTimeout(function() { 
     // what should variable cell be? 
    }, 1000, cell); 
}); 

UPDATE：これは明らかだったが、あなたが持っていた場合cell.pageXが不定になるので、私はこれを尋ねた理由があった。しかし

$('td[someAttr]').mouseenter(function() { 
    var cell = this; // 
    var timeoutId = setTimeout(function() { 
     alert(cell.pageX); // cell.pageX will return null 
    }, 1000); 
}); 

、場合あなたは持っていた：

$('td[someAttr]').mouseenter(function(cell) { 
    alert(cell.pageX); // works fine as cell.pageX will have correct value. 
}); 

Answer 1

イベントハンドラのコンテキストは、イベントをトリガした要素に設定されます。

$('td[someAttr]').mouseenter(function() { 
    var cell = this; 
    var timeoutId = setTimeout(function() { 
     alert(cell.tagName); 
    }, 1000); 
}); 

あなたはまた、同様にjQueryオブジェクトとしてそれをラップすることもできます。：var cell = $(this);

UPDATE：あなたはそれをこの方法を得ることができ、最初の引数は、イベントオブジェクト、ない要素です。要素は、コールバック（つまり、この）のコンテキストとして設定されていると、あなたはあなたの例にあった正確な方法でイベントオブジェクトへのアクセスを得ることができます：「セル」の要素でもあること

$('td[someAttr]').mouseenter(function(event) { 
    var cell = this; 
    var timeoutId = setTimeout(function() { 
     alert(cell.tagName + ' ' + event.pageX); 
    }, 1000); 
}); 

注意"event.target"としてアクセス可能です。