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

#1 July 20th, 2005, 11:47 AM

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

#2 July 20th, 2005, 11:47 AM

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" <jcboget@yahoo.com> wrote in message
news:tibsb.614$Ob3.651522@monger.newsread.com...[color=blue]
> newFieldElement = document.createElement( 'INPUT' );
> newFieldElement.onblur = new Function( "calculatePremiumOptionTotal([/color]
this );" );[color=blue]
>
> 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
>
>[/color]

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

Popular Articles

What is Bytes?