フォーカスイベントとタブ切り替え

input や textarea にフォーカスがあったってる状態でタブを切り替えたときに focus, blur イベントがどのように起こるか各ブラウザを調べてみた。

テスト内容

テストページ

ページには input[type=text], textarea, button が並んでる。
各要素はフォーカスすると 要素名を書き出し、フォーカスが外れると 要素名: blur と書き出すようになっている。
やったことはテストページと別のページを開いておき、input or textarea or button のいづれかの要素にフォーカスした状態でもう一方のページに切り替え、テストページに戻るというテスト。ページの切り替えはタブバーを使った。

テストしたブラウザは IE 7, Firefox 3.0.6, Opera 9.64, Safari 3.2.2 の 4 つ。いづれも Windows 環境。

結果

IE & Firefox

テストページから別のページを切り替えると blur イベントが発生。つまりフォーカスが外れる。
戻ってくると同じ要素にフォーカスがあたり focus イベントが発生。

Opera

テストページから別のページを切り替えてもフォーカスは外れない。
戻ってきてもフォーカスされたまま。
ページ切り替えでイベントは発生しない。

Safari

ちょっと挙動がつかみづらいのでもしかしたら違うかも。
テストページから別のページを切り替えるとフォーカスが外れる。ただし blur イベントが発生しない。
戻ってくるとフォーカスは外れたまま。
再びその要素にフォーカスすると blur イベント(さっき外れたときのイベントと思われる。) と focus イベントが発生。
blur イベントはその要素にフォーカスせずともページをクリックしただけでも起こる。

この違いがどのような不具合をもたらすのかがいまいち思いつかない。