Firefox differences in event handlers through HTML attributes and Javascript DOM

[Safalra]

Recently I've rewritten much of my old Javascript code to use DOM functions
so that enhancements can be attached to documents without needing to alter
the HTML code. I assumed that adding event handlers to document.body would
have the same effect as adding those event handlers through attributes of
the body element, but this turned out not to be the case for key events.
Take this example page (IE-specific code removed):

http://www.safalra.com/hotlinkable/key-events.html

Key events will highlight the appropriate table cells in red for a quarter
of a second. It turns out the the DOM equivalent of adding key event
handlers to the body element is to add them to the document object, not
document.body. If the event handler is added to document.body, key events
are only detected for subelements (try typing in the input box).

Is Firefox' behaviour correct, and if so why?

--
Safalra
http://www.safalra.com/programming/javascript/

[Safalra]

On Sat, 24 Mar 2007 20:04:13 +0000, Safalra wrote:

Recently I've rewritten much of my old Javascript code to use DOM functions
so that enhancements can be attached to documents without needing to alter
the HTML code. I assumed that adding event handlers to document.body would
have the same effect as adding those event handlers through attributes of
the body element, but this turned out not to be the case for key events.
Take this example page (IE-specific code removed):

http://www.safalra.com/hotlinkable/key-events.html

Key events will highlight the appropriate table cells in red for a quarter
of a second. It turns out the the DOM equivalent of adding key event
handlers to the body element is to add them to the document object, not
document.body. If the event handler is added to document.body, key events
are only detected for subelements (try typing in the input box).

Is Firefox' behaviour correct, and if so why?

For the record, Opera behaves in the same way as IE (except it uses the
proper DOM methods to attach events, of course). This is starting to look
more like a bug in Firefox.

--
Safalra
http://www.safalra.com/programming/javascript/

[-Lost]

"Safalra" <us****@safalra.comwrote in message
news:1p*****************************@40tude.net...

On Sat, 24 Mar 2007 20:04:13 +0000, Safalra wrote:

>Recently I've rewritten much of my old Javascript code to use DOM functions
so that enhancements can be attached to documents without needing to alter
the HTML code. I assumed that adding event handlers to document.body would
have the same effect as adding those event handlers through attributes of
the body element, but this turned out not to be the case for key events.
Take this example page (IE-specific code removed):

http://www.safalra.com/hotlinkable/key-events.html

Key events will highlight the appropriate table cells in red for a quarter
of a second. It turns out the the DOM equivalent of adding key event
handlers to the body element is to add them to the document object, not
document.body. If the event handler is added to document.body, key events
are only detected for subelements (try typing in the input box).

Is Firefox' behaviour correct, and if so why?

For the record, Opera behaves in the same way as IE (except it uses the
proper DOM methods to attach events, of course). This is starting to look
more like a bug in Firefox.

Firstly, bear in mind I am not JavaScript expert, so if I happen to skip some fundamental
aspect of your theory, feel free to enlighten me.

The document.body event listeners can only be fired within the context of the
document.body. The input (and the table) is part of the document.body, therefore a key
event could only be fired if it could be executed within the context of document.body, for
example, clicking in an input tag within the document.body and firing key events.

document.body.addEventListener('click', function() { alert('within document.body'); },
false);

Only fires if you click *anywhere* between the top of the page and the input. *Not* below
the input (outside of document.body once you do that).

-Lost