What's wrong with this "new Function()" statement?

Discussion in 'Javascript' started by Christoph, Nov 11, 2003.

  1. Christoph

    Christoph Guest

    newFieldElement = document.createElement( 'INPUT' );
    newFieldElement.onblur = new Function( "calculatePremiumOptionTotal( this );" );

    In my (dynamically generated) javascript, I've never had a problem with
    attaching a function to an event using the above. However, what's going
    on with the above is that the reference to the element object (this) isn't
    being passed to my function. When I do an alert on the argument within
    the function, I'm getting undefined.
    Are you not allowed to pass 'this' reference when attaching a function to
    an event as exampled above?

    Any insight would be greatly appreciated!

    thnx,
    Christoph
     
    Christoph, Nov 11, 2003
    #1
    1. Advertising

  2. Christoph

    Mike Guest

    Creating annonymous functions for event handlers is not really a good way to
    go. It works fine but can get you into trouble.

    I'll give you 2 solutions. One that uses an annonymous function and another
    that I think is cleaner and does not.

    option 1:
    newFieldElement.onblur = function() { alert( this.value );};

    option 2:
    newFieldElement.onblur = show;
    function show(){
    alert(this.value);
    }

    The reason I prefer option 2 is that for every element you create an event
    handler for using option 1 you are going to create a duplicate annonymous
    function. So if you create 5 input fields with this blur event you are going
    to create 5 annonymous functions that do exactly the same thing. With option
    2 you only will have one instance of the event handler function that is
    referenced by 5 input elements. On screen where you have a lot of elements
    this will improve your system's performance.

    Are you scratching you head wondering if option 2 even really works? Run the
    following test it works.

    <html>
    <head>
    <script language="javascript">
    function init(){
    newFieldElement = document.createElement( 'INPUT' );
    newFieldElement.onblur = show;
    document.body.appendChild(newFieldElement);

    newFieldElement1 = document.createElement( 'INPUT' );
    newFieldElement1.onblur = show;
    document.body.appendChild(newFieldElement1);
    }
    function show(){
    alert( this.value );
    }
    </script>
    </head>
    <body onload="init()">
    </body>
    </html>


    Mike

    "Christoph" <> wrote in message
    news:tibsb.614$...
    > newFieldElement = document.createElement( 'INPUT' );
    > newFieldElement.onblur = new Function( "calculatePremiumOptionTotal(

    this );" );
    >
    > In my (dynamically generated) javascript, I've never had a problem with
    > attaching a function to an event using the above. However, what's going
    > on with the above is that the reference to the element object (this) isn't
    > being passed to my function. When I do an alert on the argument within
    > the function, I'm getting undefined.
    > Are you not allowed to pass 'this' reference when attaching a function to
    > an event as exampled above?
    >
    > Any insight would be greatly appreciated!
    >
    > thnx,
    > Christoph
    >
    >
     
    Mike, Nov 12, 2003
    #2
    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. Replies:
    3
    Views:
    807
  2. Jay McGavren
    Replies:
    11
    Views:
    1,140
    Alan Krueger
    Jan 16, 2006
  3. tedsuzman
    Replies:
    2
    Views:
    7,092
    Michel Claveau, résurectionné d'outre-bombe inform
    Jul 21, 2004
  4. Ted
    Replies:
    1
    Views:
    468
    Duncan Booth
    Jul 22, 2004
  5. Replies:
    21
    Views:
    1,060
    Giannis Papadopoulos
    Aug 2, 2005
Loading...

Share This Page