attachEvent(addEventListener)の使い方

質問

--- HTML部 ---
<form name="f">
<input type="text" name="i1" />
<input type="text" name="i2" />
<input type="text" name="i3" />
</form>

--- JavaScript部 ---
function doFocus (node) {
alert(node.name);
}

function addFocus () {

for (var i = 0; i < arguments.length; i++) {
var Arg = eval("document.f." + arguments[i]);
Arg.attachEvent("onfocus", function(){doFocus(this);});
}

}

addFocus("i1","i2","i3")

上記スクリプトを実行したときこちらの期待する結果は
テキストフィールドにフォーカスがあたると
それぞれのname属性値が表示されることなのですが
現状では何も表示の無いアラートが帰ってきます。

また「this」と指定している箇所を「Arg」と変更してみたのですが
この場合はどのテキストフィールドにフォーカスがあたっても
「i3」と返ってきてしまいました。

addFocusの引数をひとつにし、「this」と記述している箇所を
「Arg」とすればうまくいくことは確認しているのですが
できれば上記のようにaddFocusに複数の引数を渡して対応したいと
考えております。

通常はINPUTタグのonfocusイベントハンドラに
「dofocus(this);」と書けば済む話ではあるのですが
attachEventを利用した場合の記述がうまくできなかったので
質問させていただきました。

前置きが長くなりましたが、addFocusの仕様（引数）を変更せずに
期待する結果を得るにはどのようにすればよいでしょうか？

回答No.1

auty · ベストアンサー

・　IEのattachEvent()は動作は、特異で、この場合
　　addFocus()関数の中でも
　　イベントハンドラの中でも
　　thisキーワードは、グロバルなwindowオブジェクトを指しているようです。

・　「テキストフィールドにフォーカスがあたるとそれぞれのname属性値が表示されることなのですが」とするには、window.eventオブジェクトを利用してください。ただしバブリングのない簡単な構成の場合とします。

function doFocus (node) {
alert(window.event.srcElement.name);
}

お礼

解答ありがとうございます。

上記ソースコードを一部改変してFFやNN、Operaでこの場合の「this」が
利用できるか確認してみたところ、
うまく動作することを確認しました。
auty様のおっしゃられた通りで、確かにIEだけ特異なのですね。

「srcElement」というものがあることも初めて知りました。
よって、ブラウザがIEの場合はsrcElementを使うようにソースを改変して解決いたしました。

適切な解説をいただきまして本当にありがとうございました。