Dynamically adding javascrip with javascript

[annoyingmouse]

Is it possible to use javascript to add javascript to a DOM object?
I've the following code to add an image to a page:

function flagError(id){
var image = document.createElement('img');
image.alt = "error";
image.src = "./resources/errorNew.gif";
var uncle = getUncle(id);
if(!first_child(uncle)){
uncle.appendChild(image);
}
}

what I want to do is use wz_tooltip to add a nice tooltip to the image.
The end result would be something like this:

<img src="./resources/errorNew.gif" alt="error" onmouseover="return
escape('Repition.');"/>

I've looked at doing it via:

image.onmouseover = "\"return escape('Repition.');\"";

but that doesn't seem to work at all... any ideas anyone?

Cheers,

Dom

 

[Thomas 'PointedEars' Lahn]

Is it possible to use javascript to add javascript to a DOM object?

In a sense, yes.

[...]
The end result would be something like this:

<img src="./resources/errorNew.gif" alt="error" onmouseover="return
escape('Repition.');"/>

I've looked at doing it via:

image.onmouseover = "\"return escape('Repition.');\"";

but that doesn't seem to work at all... any ideas anyone?

If you use

<img src="resources/errorNew.gif" alt="error"
onmouseover="return escape('Repition.');"
id="foo"/>

then (supported by UAs conforming to W3C-DOM Level 2 Events here, so not IE)

document.images['foo'].addEventListener(
'mouseover',
function()
{
return escape('Repition.');
},
false);

or (supported by all widely distributed Web browsers, including IE)

document.images['foo'].onmouseover = function()
{
return escape('Repition.');
}

or (IE-only)

document.images['foo'].attachEvent(
'onmouseover',
function()
{
return escape('Repition.');
});

will add an event listener (or overwrite the previous one on assignment)
to the element represented by the respective DOM element object.

[However, there is no need for escape() in either example.]

RTFM and do some research on previous discussions before you post;
this is a _news_group.

<URL:http://jibbering.com/faq/>


PointedEars

 

[Ronaldo Junior]

I've looked at doing it via:

image.onmouseover = "\"return escape('Repition.');\"";

Try this instead:

image.onmouseover = new Function("return escape('Repition')");

 

[Randy Webb]

(e-mail address removed) said the following on 1/17/2006 9:58 AM:

Is it possible to use javascript to add javascript to a DOM object?
I've the following code to add an image to a page:

function flagError(id){
var image = document.createElement('img');
image.alt = "error";
image.src = "./resources/errorNew.gif";
var uncle = getUncle(id);
if(!first_child(uncle)){
uncle.appendChild(image);
}
}

what I want to do is use wz_tooltip to add a nice tooltip to the image.
The end result would be something like this:

<img src="./resources/errorNew.gif" alt="error" onmouseover="return
escape('Repition.');"/>

I've looked at doing it via:

image.onmouseover = "\"return escape('Repition.');\"";

image would be my last choice of a variable name for an image.

imageRef.onmouseover = function(){
return escape('Repition.')
}

 

[Randy Webb]

Ronaldo Junior said the following on 1/17/2006 11:50 AM:

Try this instead:

image.onmouseover = new Function("return escape('Repition')");

I actually just learned that whether you use function() or new Function
in that position depends on what scope you want it to have.

 

[Ronaldo Junior]

I actually just learned that whether you use function() or new Function

in that position depends on what scope you want it to have.

Would you care to explain?

 

[Lasse Reichstein Nielsen]

Would you care to explain?

When you write
function () { return foo; }
the "foo" variable refers to the closest enclosing declaration of
a variable called foo. So, inside another function, e.g., :

function setHandler(elem, foo) {
elem.onclick = function(){ alert(foo); };
}

the inner "foo" refers to the local variable created by the outer
function argument. I.e., it works to write:
setHandler(document.body, "YOU TOUCHED THE BODY");

When you create a function using the Function method (used as a
constructor or not), the body of the function will not see surrounding
variables, but only the global scope (and parameters of the created
function ofcourse). So, if you do:

var foo = "GOTCHA!";
function setHandler2(elem, foo) {
elem.onclick = new Function("alert(foo);");
}

then calling
setHandler2(document.body, "YOU TOUCHED THE BODY");
and clicking the document body will alert "GOTCHA!", not the intended
message.

/L

 

[annoyingmouse]

Sorry Thomas, I checked the FAQ and searched previous posts before
posting but I guess my google skills - or ability to grok the answers -
aren't as top-hole as yours. Thank you all for the help.
Cheers, Dom