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

C

Christoph

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
 
M

Mike

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
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me what's wrong with this question on StackOverflow? 0
What "might" I be doing wrong with this snippet? 6
How do i Do this function(dealing with arrays) 1
New to this forum ... looking for direction 8
what's wrong with this code? 13
Help me with this task, please. 3
Trouble calling a function with enum parameter 3
What's wrong with this bookmarklet? 0

Members online

No members online now.
Total: 36 (members: 1, guests: 35)
Robots: 454

Forum statistics

Threads
473,768
Messages
2,569,574
Members
45,051
Latest member
CarleyMcCr

Latest Threads

Top