Problem with "this" keyword in event handler of body element

Discussion in 'Javascript' started by szimek, Feb 12, 2008.

  1. szimek

    szimek Guest

    Hi,

    I've got this very simple code:

    <body onclick="foo(event, this)">

    Inside foo method in IE "this" is body object, but in FF it's window
    object - at least that's what MS Script Editor and Firebug are saying.
    Any ideas why it works like that?
     
    szimek, Feb 12, 2008
    #1
    1. Advertising

  2. szimek

    szimek Guest

    Re: Problem with "this" keyword in event handler of body element

    On 12 Lut, 12:04, szimek <> wrote:
    > Hi,
    >
    > I've got this very simple code:
    >
    > <body onclick="foo(event, this)">
    >
    > Inside foo method in IE "this" is body object, but in FF it's window
    > object - at least that's what MS Script Editor and Firebug are saying.
    > Any ideas why it works like that?


    I've posted it too soon. Basically it really sucks:

    "Attaching a function using addEventListener() changes the value of
    this--note that the value of this is passed to a function from the
    caller."
    "If the onclick handler is added in the HTML source then value of this
    when called from the onclick event will be a reference to the global
    (window) object."
    http://developer.mozilla.org/en/docs/DOM:element.addEventListener

    Why does it work like that?! I'm rewritting IE-only app that has
    inline javascript everywhere thus "this" element is wrong in almost
    every event handler...

    2 questions
    - is there a different way than using addEventHandler() to modify FF
    behavior to make "this" actual element instead of window object?
    - if I'm forced to use addEventHandler - where to put this code so the
    event handlers will be registered when the page (dom only?) is loaded?

    Thanks in advance for any suggestions
     
    szimek, Feb 12, 2008
    #2
    1. Advertising

  3. szimek

    RobG Guest

    Re: Problem with "this" keyword in event handler of body element

    szimek wrote:
    > On 12 Lut, 12:04, szimek <> wrote:
    >
    > > Hi,

    >
    > > I've got this very simple code:

    >
    > > <body onclick="foo(event, this)">

    >
    > > Inside foo method in IE "this" is body object, but in FF it's window
    > > object - at least that's what MS Script Editor and Firebug are saying.
    > > Any ideas why it works like that?


    What does your foo declaration look like? It should be something like:

    function foo(e, el) {...}


    Where "e" will be a reference to the event object and el will be a
    reference to the object referenced by the this keyword in the caller,
    which will be the body element in all browsers I know of.

    I'll guess that you have something like:

    function foo(event, this) {...}

    or maybe:

    function foo() {
    // do stuff with event
    // do stuff with this
    }

    both of which are not going to work the way you want in browsers
    compliant with the W3C DOM level 2 such as Firefox and others.


    > I've posted it too soon. Basically it really sucks:
    >
    > "Attaching a function using addEventListener() changes the value of
    > this--note that the value of this is passed to a function from the
    > caller."
    > "If the onclick handler is added in the HTML source then value of this
    > when called from the onclick event will be a reference to the global
    > (window)

    object."http://developer.mozilla.org/en/docs/DOM:element.addEventListener

    You've taken that completely out of context. Read the example again, it
    is quite different to what you posted.


    > Why does it work like that?! I'm rewritting IE-only app that has
    > inline javascript everywhere thus "this" element is wrong in almost
    > every event handler...


    I think you have misunderstood what is going on.


    > 2 questions
    > - is there a different way than using addEventHandler()


    I think you mean addEventListener... :)

    > to modify FF
    > behavior to make "this" actual element instead of window object?


    Use it like this:

    <script type="text/javascript">
    function foo(e, el) {
    // e is a reference to the event object
    // el is a reference to the element that called the function
    }
    </script>
    <body onclick="foo(event, this);">...</body>


    > - if I'm forced to use addEventHandler


    You aren't. There are more issues using addEventListener/attachEvent
    than using in-line code.


    --
    Rob
    "We shall not cease from exploration, and the end of all our
    exploring will be to arrive where we started and know the
    place for the first time." -- T. S. Eliot
     
    RobG, Feb 12, 2008
    #3
  4. szimek

    szimek Guest

    Re: Problem with "this" keyword in event handler of body element

    On 12 Lut, 13:04, RobG <> wrote:
    > szimek wrote:
    >
    >  > On 12 Lut, 12:04, szimek <> wrote:
    >  >
    >  > > Hi,
    >  >
    >  > > I've got this very simple code:
    >  >
    >  > > <body onclick="foo(event, this)">
    >  >
    >  > > Inside foo method in IE "this" is body object, but in FF it's window
    >  > > object - at least that's what MS Script Editor and Firebug are saying.
    >  > > Any ideas why it works like that?
    >
    > What does your foo declaration look like?  It should be something like:
    >
    > function foo(e, el) {...}
    >
    > Where "e" will be a reference to the event object and el will be a
    > reference to the object referenced by the this keyword in the caller,
    > which will be the body element in all browsers I know of.
    >
    > I'll guess that you have something like:
    >
    > function foo(event, this) {...}
    >
    > or maybe:
    >
    > function foo() {
    >    // do stuff with event
    >    // do stuff with this
    >
    > }
    >
    > both of which are not going to work the way you want in browsers
    > compliant with the W3C DOM level 2 such as Firefox and others.
    >
    >  > I've posted it too soon. Basically it really sucks:
    >  >
    >  > "Attaching a function using addEventListener() changes the value of
    >  > this--note that the value of this is passed to a function from the
    >  > caller."
    >  > "If the onclick handler is added in the HTML source then value of this
    >  > when called from the onclick event will be a reference to the global
    >  > (window)
    > object."http://developer.mozilla.org/en/docs/DOM:element.addEventListener
    >
    > You've taken that completely out of context.  Read the example again, it
    > is quite different to what you posted.
    >
    >  > Why does it work like that?! I'm rewritting IE-only app that has
    >  > inline javascript everywhere thus "this" element is wrong in almost
    >  > every event handler...
    >
    > I think you have misunderstood what is going on.
    >
    >  > 2 questions
    >  > - is there a different way than using addEventHandler()
    >
    > I think you mean addEventListener... :)
    >
    >  > to modify FF
    >  > behavior to make "this" actual element instead of window object?
    >
    > Use it like this:
    >
    >    <script type="text/javascript">
    >      function foo(e, el) {
    >        // e is a reference to the event object
    >        // el is a reference to the element that called the function
    >      }
    >    </script>
    >    <body onclick="foo(event, this);">...</body>
    >
    >  > - if I'm forced to use addEventHandler
    >
    > You aren't.  There are more issues using addEventListener/attachEvent
    > than using in-line code.
    >
    > --
    > Rob
    >   "We shall not cease from exploration, and the end of all our
    >    exploring will be to arrive where we started and know the
    >    place for the first time." -- T. S. Eliot


    Thanks for answering so fast. Yeah I made few mistakes in my previous
    post :)

    The reason why I don't understand it, is that my function declaration
    looks like this:
    <body onclick='page_onclick(event, this);' ...>
    function page_onclick(e, ctrlInst) {
    // ctrlInst is window in FF
    // ctrlInst is body in IE
    }
    I have no idea why it works like this.
     
    szimek, Feb 12, 2008
    #4
  5. szimek

    szimek Guest

    Re: Problem with "this" keyword in event handler of body element

    On 12 Lut, 13:25, szimek <> wrote:
    > On 12 Lut, 13:04, RobG <> wrote:
    >
    >
    >
    > > szimek wrote:

    >
    > >  > On 12 Lut, 12:04, szimek <> wrote:
    > >  >
    > >  > > Hi,
    > >  >
    > >  > > I've got this very simple code:
    > >  >
    > >  > > <body onclick="foo(event, this)">
    > >  >
    > >  > > Inside foo method in IE "this" is body object, but in FF it's window
    > >  > > object - at least that's what MS Script Editor and Firebug are saying.
    > >  > > Any ideas why it works like that?

    >
    > > What does your foo declaration look like?  It should be something like:

    >
    > > function foo(e, el) {...}

    >
    > > Where "e" will be a reference to the event object and el will be a
    > > reference to the object referenced by the this keyword in the caller,
    > > which will be the body element in all browsers I know of.

    >
    > > I'll guess that you have something like:

    >
    > > function foo(event, this) {...}

    >
    > > or maybe:

    >
    > > function foo() {
    > >    // do stuff with event
    > >    // do stuff with this

    >
    > > }

    >
    > > both of which are not going to work the way you want in browsers
    > > compliant with the W3C DOM level 2 such as Firefox and others.

    >
    > >  > I've posted it too soon. Basically it really sucks:
    > >  >
    > >  > "Attaching a function using addEventListener() changes the value of
    > >  > this--note that the value of this is passed to a function from the
    > >  > caller."
    > >  > "If the onclick handler is added in the HTML source then value of this
    > >  > when called from the onclick event will be a reference to the global
    > >  > (window)
    > > object."http://developer.mozilla.org/en/docs/DOM:element.addEventListener

    >
    > > You've taken that completely out of context.  Read the example again, it
    > > is quite different to what you posted.

    >
    > >  > Why does it work like that?! I'm rewritting IE-only app that has
    > >  > inline javascript everywhere thus "this" element is wrong in almost
    > >  > every event handler...

    >
    > > I think you have misunderstood what is going on.

    >
    > >  > 2 questions
    > >  > - is there a different way than using addEventHandler()

    >
    > > I think you mean addEventListener... :)

    >
    > >  > to modify FF
    > >  > behavior to make "this" actual element instead of window object?

    >
    > > Use it like this:

    >
    > >    <script type="text/javascript">
    > >      function foo(e, el) {
    > >        // e is a reference to the event object
    > >        // el is a reference to the element that called the function
    > >      }
    > >    </script>
    > >    <body onclick="foo(event, this);">...</body>

    >
    > >  > - if I'm forced to use addEventHandler

    >
    > > You aren't.  There are more issues using addEventListener/attachEvent
    > > than using in-line code.

    >
    > > --
    > > Rob
    > >   "We shall not cease from exploration, and the end of all our
    > >    exploring will be to arrive where we started and know the
    > >    place for the first time." -- T. S. Eliot

    >
    > Thanks for answering so fast. Yeah I made few mistakes in my previous
    > post :)
    >
    > The reason why I don't understand it, is that my function declaration
    > looks like this:
    > <body onclick='page_onclick(event, this);' ...>
    > function page_onclick(e, ctrlInst) {
    >   // ctrlInst is window in FF
    >   // ctrlInst is body in IE}
    >
    > I have no idea why it works like this.


    I wrote this simple test page:
    <html>
    <body onclick="foo(this);">
    <h1 onclick="foo(this);">Test</h1>
    <script>
    function foo(element) {
    alert(element.tagName);
    }
    </script>
    </body>
    </html>

    I tested it with FF 2.0.0.12 and 1.5.0.12 and both browsers give "H1"
    correctly when clicking on the header and "undefined" (window object)
    when clicking on the body. IE and Opera 9.23 work correctly giving
    "BODY" in the second case. Is it supposed to work like this or is it
    some long standing FF bug?
     
    szimek, Feb 12, 2008
    #5
  6. szimek

    RobG Guest

    Re: Problem with "this" keyword in event handler of body element

    szimek wrote:
    >>> > On 12 Lut, 12:04, szimek <> wrote:
    >>> >
    >>> > > Hi,
    >>> >
    >>> > > I've got this very simple code:
    >>> >
    >>> > > <body onclick="foo(event, this)">
    >>> >
    >>> > > Inside foo method in IE "this" is body object, but in FF it's window
    >>> > > object - at least that's what MS Script Editor and Firebug are saying.

    [...]
    >
    > I wrote this simple test page:
    > <html>
    > <body onclick="foo(this);">
    > <h1 onclick="foo(this);">Test</h1>
    > <script>
    > function foo(element) {
    > alert(element.tagName);
    > }
    > </script>
    > </body>
    > </html>
    >
    > I tested it with FF 2.0.0.12 and 1.5.0.12 and both browsers give "H1"
    > correctly when clicking on the header and "undefined" (window object)
    > when clicking on the body. IE and Opera 9.23 work correctly giving
    > "BODY" in the second case. Is it supposed to work like this or is it
    > some long standing FF bug?


    Weird, I don't remember coming across that before, it seems like a bug
    in Firefox to me. I'll check Bugzilla later if I have time.



    --
    Rob
    "We shall not cease from exploration, and the end of all our
    exploring will be to arrive where we started and know the
    place for the first time." -- T. S. Eliot
     
    RobG, Feb 12, 2008
    #6
  7. szimek

    dhtml Guest

    Re: Problem with "this" keyword in event handler of body element

    On Feb 12, 1:04 pm, RobG <> wrote:
    > szimek wrote:
    > >>> > On 12 Lut, 12:04, szimek <> wrote:

    >
    > >>> > > Hi,

    >
    > >>> > > I've got this very simple code:

    >
    > >>> > > <body onclick="foo(event, this)">

    >
    > >>> > > Inside foo method in IE "this" is body object, but in FF it's window
    > >>> > > object - at least that's what MS Script Editor and Firebug are saying.

    > [...]
    >
    > > I wrote this simple test page:
    > > <html>
    > > <body onclick="foo(this);">
    > > <h1 onclick="foo(this);">Test</h1>
    > > <script>
    > > function foo(element) {
    > > alert(element.tagName);
    > > }
    > > </script>
    > > </body>
    > > </html>

    >
    > > I tested it with FF 2.0.0.12 and 1.5.0.12 and both browsers give "H1"
    > > correctly when clicking on the header and "undefined" (window object)
    > > when clicking on the body. IE and Opera 9.23 work correctly giving
    > > "BODY" in the second case. Is it supposed to work like this or is it
    > > some long standing FF bug?

    >
    > Weird, I don't remember coming across that before, it seems like a bug
    > in Firefox to me. I'll check Bugzilla later if I have time.
    >

    It is a bug. I could not find a bug rep't.

    > --
    > Rob
    > "We shall not cease from exploration, and the end of all our
    > exploring will be to arrive where we started and know the
    > place for the first time." -- T. S. Eliot
     
    dhtml, Feb 13, 2008
    #7
  8. szimek

    RobG Guest

    Re: Problem with "this" keyword in event handler of body element

    On Feb 13, 4:14 pm, dhtml <> wrote:
    > On Feb 12, 1:04 pm, RobG <> wrote:
    >
    > > szimek wrote:
    > > >>> > On 12 Lut, 12:04, szimek <> wrote:

    >
    > > >>> > > Hi,

    >
    > > >>> > > I've got this very simple code:

    >
    > > >>> > > <body onclick="foo(event, this)">

    >
    > > >>> > > Inside foo method in IE "this" is body object, but in FF it's window
    > > >>> > > object - at least that's what MS Script Editor and Firebug are saying.

    > > [...]

    >
    > > > I wrote this simple test page:
    > > > <html>
    > > > <body onclick="foo(this);">
    > > > <h1 onclick="foo(this);">Test</h1>
    > > > <script>
    > > > function foo(element) {
    > > > alert(element.tagName);
    > > > }
    > > > </script>
    > > > </body>
    > > > </html>

    >
    > > > I tested it with FF 2.0.0.12 and 1.5.0.12 and both browsers give "H1"
    > > > correctly when clicking on the header and "undefined" (window object)
    > > > when clicking on the body. IE and Opera 9.23 work correctly giving
    > > > "BODY" in the second case. Is it supposed to work like this or is it
    > > > some long standing FF bug?

    >
    > > Weird, I don't remember coming across that before, it seems like a bug
    > > in Firefox to me. I'll check Bugzilla later if I have time.

    >
    > It is a bug. I could not find a bug rep't.


    szimek seems to have reported it in Bugzilla ID #417080. I gave it a
    vote. :)


    --
    Rob
     
    RobG, Feb 13, 2008
    #8
  9. szimek

    wilq Guest

    Re: Problem with "this" keyword in event handler of body element

    On Feb 12, 1:25 pm, szimek <> wrote:
    > On 12 Lut, 13:04, RobG <> wrote:
    >
    >
    >
    >
    >
    > > szimek wrote:

    >
    > >  > On 12 Lut, 12:04, szimek <> wrote:
    > >  >
    > >  > > Hi,
    > >  >
    > >  > > I've got this very simple code:
    > >  >
    > >  > > <body onclick="foo(event, this)">
    > >  >
    > >  > > Inside foo method in IE "this" is body object, but in FF it's window
    > >  > > object - at least that's what MS Script Editor and Firebug are saying.
    > >  > > Any ideas why it works like that?

    >
    > > What does your foo declaration look like?  It should be something like:

    >
    > > function foo(e, el) {...}

    >
    > > Where "e" will be a reference to the event object and el will be a
    > > reference to the object referenced by the this keyword in the caller,
    > > which will be the body element in all browsers I know of.

    >
    > > I'll guess that you have something like:

    >
    > > function foo(event, this) {...}

    >
    > > or maybe:

    >
    > > function foo() {
    > >    // do stuff with event
    > >    // do stuff with this

    >
    > > }

    >
    > > both of which are not going to work the way you want in browsers
    > > compliant with the W3C DOM level 2 such as Firefox and others.

    >
    > >  > I've posted it too soon. Basically it really sucks:
    > >  >
    > >  > "Attaching a function using addEventListener() changes the value of
    > >  > this--note that the value of this is passed to a function from the
    > >  > caller."
    > >  > "If the onclick handler is added in the HTML source then value of this
    > >  > when called from the onclick event will be a reference to the global
    > >  > (window)
    > > object."http://developer.mozilla.org/en/docs/DOM:element.addEventListener

    >
    > > You've taken that completely out of context.  Read the example again, it
    > > is quite different to what you posted.

    >
    > >  > Why does it work like that?! I'm rewritting IE-only app that has
    > >  > inline javascript everywhere thus "this" element is wrong in almost
    > >  > every event handler...

    >
    > > I think you have misunderstood what is going on.

    >
    > >  > 2 questions
    > >  > - is there a different way than using addEventHandler()

    >
    > > I think you mean addEventListener... :)

    >
    > >  > to modify FF
    > >  > behavior to make "this" actual element instead of window object?

    >
    > > Use it like this:

    >
    > >    <script type="text/javascript">
    > >      function foo(e, el) {
    > >        // e is a reference to the event object
    > >        // el is a reference to the element that called the function
    > >      }
    > >    </script>
    > >    <body onclick="foo(event, this);">...</body>

    >
    > >  > - if I'm forced to use addEventHandler

    >
    > > You aren't.  There are more issues using addEventListener/attachEvent
    > > than using in-line code.

    >
    > > --
    > > Rob
    > >   "We shall not cease from exploration, and the end of all our
    > >    exploring will be to arrive where we started and know the
    > >    place for the first time." -- T. S. Eliot

    >
    > Thanks for answering so fast. Yeah I made few mistakes in my previous
    > post :)
    >
    > The reason why I don't understand it, is that my function declaration
    > looks like this:
    > <body onclick='page_onclick(event, this);' ...>
    > function page_onclick(e, ctrlInst) {
    >   // ctrlInst is window in FF
    >   // ctrlInst is body in IE}
    >
    > I have no idea why it works like this.- Hide quoted text -
    >
    > - Show quoted text -


    I might be wrong, but a "event" is defined in IE (or in FF - i dont
    remember exacly) and like the "this" gives something other than
    onclick event. Try to put there instead something like
    page_onclick(e,this). Second thing as i remember it might be bug from
    old Netscape architecture where main item was window, and in IE was
    document.body. Correct me if I am wrong please:))
     
    wilq, Feb 13, 2008
    #9
  10. szimek

    VK Guest

    Re: Problem with "this" keyword in event handler of body element

    On Feb 13, 9:48 am, RobG <> wrote:
    > On Feb 13, 4:14 pm, dhtml <> wrote:
    >
    >
    >
    > > On Feb 12, 1:04 pm, RobG <> wrote:

    >
    > > > szimek wrote:
    > > > >>> > On 12 Lut, 12:04, szimek <> wrote:

    >
    > > > >>> > > Hi,

    >
    > > > >>> > > I've got this very simple code:

    >
    > > > >>> > > <body onclick="foo(event, this)">

    >
    > > > >>> > > Inside foo method in IE "this" is body object, but in FF it's window
    > > > >>> > > object - at least that's what MS Script Editor and Firebug are saying.
    > > > [...]

    >
    > > > > I wrote this simple test page:
    > > > > <html>
    > > > > <body onclick="foo(this);">
    > > > > <h1 onclick="foo(this);">Test</h1>
    > > > > <script>
    > > > > function foo(element) {
    > > > > alert(element.tagName);
    > > > > }
    > > > > </script>
    > > > > </body>
    > > > > </html>

    >
    > > > > I tested it with FF 2.0.0.12 and 1.5.0.12 and both browsers give "H1"
    > > > > correctly when clicking on the header and "undefined" (window object)
    > > > > when clicking on the body. IE and Opera 9.23 work correctly giving
    > > > > "BODY" in the second case. Is it supposed to work like this or is it
    > > > > some long standing FF bug?

    >
    > > > Weird, I don't remember coming across that before, it seems like a bug
    > > > in Firefox to me. I'll check Bugzilla later if I have time.

    >
    > > It is a bug. I could not find a bug rep't.

    >
    > szimek seems to have reported it in Bugzilla ID #417080. I gave it a
    > vote. :)


    I left my comment with the explanation of the phenomenon and voted NO.
    I believe Gecko behavior is fully consistent here with DOM 0.
     
    VK, Feb 13, 2008
    #10
  11. szimek

    RobG Guest

    Re: Problem with "this" keyword in event handler of body element

    On Feb 14, 8:17 am, VK <> wrote:
    [...]
    > I left my comment with the explanation of the phenomenon and voted NO.
    > I believe Gecko behavior is fully consistent here with DOM 0.


    I think your logic is flawed, DOM 0 is not a specifictation, your
    reference to the onload attribute is a red herring. The body element
    is not the window object.

    The body element is defined in the HTML specification, it has an
    onclick attribute as do most other elements. Its behaviour in the DOM
    should be implemented exactly the same way as it is implemented on all
    other elements that have it, and as all other 'on' events are
    implemented.


    --
    Rob
     
    RobG, Feb 14, 2008
    #11
  12. Re: Problem with "this" keyword in event handler of body element

    VK wrote:
    > On Feb 13, 9:48 am, RobG <> wrote:
    >> On Feb 13, 4:14 pm, dhtml <> wrote:
    >>> It is a bug. I could not find a bug rep't.

    >> szimek seems to have reported it in Bugzilla ID #417080. I gave it a
    >> vote. :)

    >
    > I left my comment with the explanation of the phenomenon and voted NO.


    You have not even understood that it is not possible to vote NO on Bugzilla.

    > I believe Gecko behavior is fully consistent here with DOM 0.


    I agree with RobG here, see my comment.


    PointedEars
     
    Thomas 'PointedEars' Lahn, Feb 17, 2008
    #12
  13. Re: Problem with "this" keyword in event handler of body element

    RobG wrote:
    > On Feb 14, 8:17 am, VK <> wrote:
    >> I left my comment with the explanation of the phenomenon and voted NO.
    >> I believe Gecko behavior is fully consistent here with DOM 0.

    >
    > I think your logic is flawed, DOM 0 is not a specifictation, your
    > reference to the onload attribute is a red herring.


    He ridiculously referred to the `onload' *property*, _not_ attribute.

    Otherwise, full ACK.


    PointedEars
    --
    var bugRiddenCrashPronePieceOfJunk = (
    navigator.userAgent.indexOf('MSIE 5') != -1
    && navigator.userAgent.indexOf('Mac') != -1
    ) // Plone, register_function.js:16
     
    Thomas 'PointedEars' Lahn, Feb 17, 2008
    #13
    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. Laurent Bugnion
    Replies:
    1
    Views:
    10,052
    =?Utf-8?B?UGV0ZXIgQnJvbWJlcmcgW0MjIE1WUF0=?=
    Jan 21, 2006
  2. Replies:
    1
    Views:
    707
    Damien
    Feb 22, 2007
  3. thomas
    Replies:
    2
    Views:
    227
    Ken Cox [Microsoft MVP]
    Mar 7, 2005
  4. Roberto Kohler

    masterpages: body event handler

    Roberto Kohler, Dec 19, 2005, in forum: ASP .Net Web Controls
    Replies:
    6
    Views:
    200
    Roberto Kohler
    Dec 21, 2005
  5. Adi
    Replies:
    2
    Views:
    193
Loading...

Share This Page