Re: [css3-selectors] Elements that can have :focus pseudo-class

Brad Kemper wrote:
> <body onfocus="document.body.className='focus';" 
> onblur="document.body.className='';" class="focus">

Note that browsers use the DOM0 on* attributes on the body to set event 
handlers on the window, not on the body.  You can easily test this by 
outputting the value of |this| in the above focus/blur handlers, or 
simply by setting up the event handlers on the body using 
addEventListener and noting that they never fire.

You're correct that these handlers do correspond to focus/blur calls... 
on the window object.

I'm curious that this was confusing; did you really think that the load 
and error events also fire on the body and not on the window?

> With this, the background-color of the body will turn green when it 
> comes into focus

No, it'll turn green when the window comes into focus.

> and turn red when another window or frame gains focus. 

Yep.

> And when it has focus, it will not lose it do to something else in the 
> same window (including a link, but not including an iframe) gains focus.

Sure.  The window has focus, and particular elements within that window 
can also have focus.

> It should be the same for the ":focus" pseudo-class. But it isn't. 
> BODY:focus doesn't work at all (at least not in Safari or Firefox).

Right, because the body doesn't have focus.  The window does.

> *Elements that are matched by :focus should be the same elements that 
> have received the "focus" event in an applicable event-driven scripting 
> language such as JavaScript. Elements that receive the "blur" event 
> should no longer be matched by the :focus pseudo-class.*

While this could be done (and is in fact what Firefox implements, as I 
recall), it wouldn't solve your problem.

> There's probably a better way to say that, but you get the idea. There 
> does not seem to be a corresponding problem with :active, as clicking 
> and holding the mouse down on the body will change its background-color 
> when you have the following:
> 
> body:active { background-color:yellow; }

That's because :active is triggered off of mousedown (at least in 
Firefox) and the body does receive a mousedown event in this case.

-Boris

Received on Sunday, 16 November 2008 19:35:22 UTC