Firefox differences in event handlers through HTML attributes and Javascript DOM

Discussion in 'Javascript' started by Safalra, Mar 24, 2007.

  1. Safalra

    Safalra Guest

    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, Mar 24, 2007
    #1
    1. Advertising

  2. Safalra

    Safalra Guest

    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/
     
    Safalra, Mar 29, 2007
    #2
    1. Advertising

  3. Safalra

    -Lost Guest

    "Safalra" <> wrote in message
    news:1pk5ijgnckz50$...
    > 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
     
    -Lost, Mar 30, 2007
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Home_Job_opportunity
    Replies:
    0
    Views:
    503
    Home_Job_opportunity
    Jan 8, 2009
  2. Nik Coughlin
    Replies:
    19
    Views:
    787
    Julian Turner
    Dec 18, 2009
  3. Replies:
    2
    Views:
    170
  4. NeoAlchemy

    DOM, JavaScript, and Browser differences

    NeoAlchemy, Feb 12, 2007, in forum: Javascript
    Replies:
    2
    Views:
    84
    NeoAlchemy
    Feb 16, 2007
  5. Nik Coughlin
    Replies:
    22
    Views:
    355
    Julian Turner
    Dec 18, 2009
Loading...

Share This Page