469,271 Members | 1,074 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,271 developers. It's quick & easy.

Firefox differences in event handlers through HTML attributes and Javascript DOM

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/
Mar 24 '07 #1
2 1904
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/
Mar 29 '07 #2
"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
Mar 30 '07 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

10 posts views Thread by tony kulik | last post: by
3 posts views Thread by Søren M. Olesen | last post: by
4 posts views Thread by Dave H | last post: by
9 posts views Thread by chandramohan.mani | last post: by
3 posts views Thread by yawnmoth | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.