bodyタグのfocus

Question

jqueryで

$('body').focus(function() {
  alert('focus');
});

などと記述しても、フォーカス時にうまくアラートが表示されません。
Bodyタグにonfocusとして直接書くと動作するのですが、何か違いがあるのでしょうか？

よろしくお願いします。

taloo · Accepted Answer

http://dev.w3.org/html5/spec/sections.html#the-b …
HTML5の方を読むと、
『window.onfocusはHTMLタグとして書けないから、<body onfocus="">で書いてちょ。ブラウザはwindowに置き換えてちょ。』
ということのようですね。

HTMLとJavaScriptの関係では、document.body.onfocusは<body onfocus="">と同等なのでwindowにマッピングされるのかもしれませんが、
addEventListenerによるイベントリスナーの登録は別物なので、
文字通り<body>にフォーカスが当たらなければonfocusイベントが呼び出されないと思います。

jQueryは全面的にaddEventListener/attachEventを使っていると思いますので、
jQueryを使うと、結果的にbodyに登録されたイベントリスナーが呼び出されなくなると思います。

デフォルトでフォーカスが当たる要素は下のページにあるように<a>や<input>などです。
<body>にフォーカスを当てる方法としてNo.3とおりtabindexが使えるようです。
http://dev.w3.org/html5/spec/editing.html#specia …
>An element is specially focusable if the tabindex attribute's definition above defines the element to be focusable.

Chaire · Answer

ごめんなさい、寝ぼけてすごく的外れなことを書きました。No.3 は全面撤回します。jQuery に問題はなく、No.2 が正しいです。

body は（そのままでは）キーボードフォーカスの対象になりませんので、body で focus を監視してもイベントリスナに通知されません。body でキーボードフォーカスを拾えるようにするには <body tabindex="0"> のように 0 以上の tabindex を付加します。

しかし、それはウィンドウ全体のフォーカスではありません。もしウィンドウのフォーカスを拾いたければ、No.2 が仰るように window を監視します。

失礼しました。

Chaire · Answer

jQuery 1.6.1 を追跡すれば分かりますが、本来内部的に

document.addEventListener('focus', handler, true);  // キャプチャリング
document.attachEvent('onfocusin', handler); // イベント名は "focusin"

のように修正されるべき所がスルーされて、"focus" のバブリングのまま登録されているからです。修正コードは jQuery に含まれているはずですが、それが実行されないバグなのか、何か他の手順が必要なのか、jQuery のリファレンスないしバグトラッカーなどで確認して下さい（私は追いかける気はないので）。

---
なお、body の onfocus は DOM3 Events および HTML5 に収録されています。この部分は主要ブラウザ間の仕様調整にもとづく後づけ規定なので、今のブラウザでも動くと考えて構いません。

それと、言うまでもありませんが一応。body（もしくは window）の focus イベントで alert() すると無限ループになる可能性があるので、十分注意して下さい。

taloo · Answer

http://www.w3.org/TR/html4/interact/scripts.html#events
<body onfocus="">はHTMLやDOMとして定義されていませんので、ブラウザ依存になるはずです。

window.onfocus、window.onloadなどで処理した方が確実だと思います。

public_sa · Answer

jquery使ったことないけど、
$('body').onfocus = function () {alert('focus');}

じゃぁないのかい？

bodyタグのfocus

ごめんなさい、寝ぼけてすごく的外れなことを書きました。

jQuery 1.6.1 を追跡すれば分かりますが、本来内部的に

jquery使ったことないけど、

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング