Problem using object methods as event handlers

Discussion in 'Javascript' started by D. Patterson, Nov 4, 2005.

  1. D. Patterson

    D. Patterson Guest

    Hello all.

    I've a bit of a problem. I would like to use a method in an object as an
    event handler. Unfortunately, when the method is called the "this" object
    references the event trigger rather than my object.

    For example, with the following code, an alert will be shown when the page
    loads
    where the value of my_name is "My Object" and nodeName is 'undefined".
    Dismissing
    that alert and then clicking anywhere on the page will present another alert
    where the
    value of my_name is "undefined" and the value of nodeName is "BODY".

    <html>
    <head>
    <title>Event Example</title>
    <script type="text/javascript" language="JavaScript">
    function x( n )
    {
    this.my_name = n;
    }
    x.prototype.toString = function( level ){ return "ABC"; }
    x.prototype.event_handler = function( e )
    {
    var evt = ( e ? e : ( window.event ? window.event : null ));
    if( !evt ) return;
    alert( "x.event_handler()\n" +
    " my_name:\t" + this.my_name + "\n" +
    " nodeName:\t" + this.nodeName + "\n" +
    " event:\t\t" + evt.type );
    }

    function body_onload()
    {
    my_obj = new x( "My Object" );
    my_obj.event_handler( { type:'Dummy' } );
    document.body.onclick = my_obj.event_handler;
    }
    </script>
    </head>
    <body onload="body_onload();">
    <input id="Button1" name="Button1" type="button" value="Button 1">
    </body>
    </html>

    Any suggestions as to how to get around this?

    Thanks in advance.,

    Dave
     
    D. Patterson, Nov 4, 2005
    #1
    1. Advertising

  2. D. Patterson wrote:
    > I've a bit of a problem. I would like to use a method in an object as
    > an event handler.


    Not at all an unusual desire.

    > Unfortunately, when the method is called the "this"
    > object references the event trigger rather than my object.

    <snip>

    There are a number of techniques that handle this problem. As you are
    assigning the handlers as a function reference the most appropriate
    method is described here:-

    <URL: http://www.jibbering.com/faq/faq_notes/closures.html >

    Richard.
     
    Richard Cornford, Nov 4, 2005
    #2
    1. Advertising

  3. D. Patterson

    D. Patterson Guest

    Wow. Great article.
    Now I go play for a while.
    I'll post the results....later.

    Thanks
    Dave

    "Richard Cornford" <> wrote in message
    news:dkeh53$kbv$1$...
    > D. Patterson wrote:
    > > I've a bit of a problem. I would like to use a method in an object as
    > > an event handler.

    >
    > Not at all an unusual desire.
    >
    > > Unfortunately, when the method is called the "this"
    > > object references the event trigger rather than my object.

    > <snip>
    >
    > There are a number of techniques that handle this problem. As you are
    > assigning the handlers as a function reference the most appropriate
    > method is described here:-
    >
    > <URL: http://www.jibbering.com/faq/faq_notes/closures.html >
    >
    > Richard.
    >
    >
     
    D. Patterson, Nov 4, 2005
    #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. Kenneth McDonald
    Replies:
    5
    Views:
    324
    Kenneth McDonald
    Sep 26, 2008
  2. cainlevy

    object reference in event handlers

    cainlevy, Apr 7, 2005, in forum: Javascript
    Replies:
    3
    Views:
    97
    Richard Cornford
    Apr 7, 2005
  3. Ron Goral
    Replies:
    7
    Views:
    104
    Bas Cost Budde
    Nov 18, 2006
  4. Murray Hopkins
    Replies:
    6
    Views:
    113
    Murray Hopkins
    Feb 28, 2007
  5. Replies:
    3
    Views:
    118
    Thomas 'PointedEars' Lahn
    Jan 22, 2009
Loading...

Share This Page