By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,988 Members | 1,074 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,988 IT Pros & Developers. It's quick & easy.

Events in the createElement function.

P: n/a
Hello, I'm trying to make a navigation bar and need to assign
mouseover, mouseclick etc. events to a img tag dynamically, here's what
im using:

function getP_Element(p_imgsrc,p_id)
{var tuf = document.createElement("img");
tuf.src=p_imgsrc;
tuf.id=p_id;
tuf.onmouseover="alert('It works!')"
return(tuf);
}

would there need to be some other path like tuf.events.onmouseover?

Jan 15 '06 #1
Share this Question
Share on Google+
17 Replies


P: n/a
or just generally how would you create:

<img src="[image source]" onmouseover="[javascript]" id="img1" />

Jan 15 '06 #2

P: n/a


mo********@gmail.com wrote:

{var tuf = document.createElement("img");
tuf.src=p_imgsrc;
tuf.id=p_id;
tuf.onmouseover="alert('It works!')"


tuf.onmouseover = function (evt) {
alert('It works!');
};
is one way to do that, probably the best cross browser way when
scripting HTML document.

--

Martin Honnen
http://JavaScript.FAQTs.com/
Jan 15 '06 #3

P: n/a
oooh ok got it, thank you so much!

Jan 15 '06 #4

P: n/a
mo********@gmail.com said the following on 1/15/2006 1:51 PM:
Hello, I'm trying to make a navigation bar and need to assign
mouseover, mouseclick etc. events to a img tag dynamically, here's what
im using:

function getP_Element(p_imgsrc,p_id)
{var tuf = document.createElement("img");
tuf.src=p_imgsrc;
tuf.id=p_id;
tuf.onmouseover="alert('It works!')"


tuf.onmouseover = new Function('alert("It works")')

Or:

tuf.onmouseover = someFunctionToExecute;

Note the abscence of the () on the someFunctionToExecute

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Jan 15 '06 #5

P: n/a
mo********@gmail.com wrote:
tuf.onmouseover="alert('It works!')"


tuf.onmouseover = function() { alert('it works!'); }

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com
Jan 15 '06 #6

P: n/a
Martin Honnen said the following on 1/15/2006 2:13 PM:


mo********@gmail.com wrote:

{var tuf = document.createElement("img");
tuf.src=p_imgsrc;
tuf.id=p_id;
tuf.onmouseover="alert('It works!')"

tuf.onmouseover = function (evt) {
alert('It works!');
};
is one way to do that, probably the best cross browser way when
scripting HTML document.


What are the advantages/disadvantages of using function (evt) over using
a new Function construct?

I have seen it done both ways and always wondered the differences and
advantages of each.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Jan 15 '06 #7

P: n/a
On 15/01/2006 19:31, Randy Webb wrote:

[snip]
What are the advantages/disadvantages of using function (evt) over using
a new Function construct?


Beyond the (potential) differences in scope chain?

[snip]

Mike

--
Michael Winter
Prefix subject with [News] before replying by e-mail.
Jan 15 '06 #8

P: n/a
Michael Winter wrote:
On 15/01/2006 19:31, Randy Webb wrote:

[snip]
What are the advantages/disadvantages of using function (evt) over
using a new Function construct?

Beyond the (potential) differences in scope chain?


I'll save you some typing :-)

<URL:
http://groups.google.co.uk/group/com...7368f8df727b19

--
Rob
Jan 16 '06 #9

P: n/a
RobG said the following on 1/15/2006 7:33 PM:
Michael Winter wrote:
On 15/01/2006 19:31, Randy Webb wrote:

[snip]
What are the advantages/disadvantages of using function (evt) over
using a new Function construct?


Beyond the (potential) differences in scope chain?


I'll save you some typing :-)

<URL:
http://groups.google.co.uk/group/com...7368f8df727b19
>



Thank you both.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Jan 16 '06 #10

P: n/a
There is a handy library behaviour.js to automate the allocation of
event functions to multiple elements:

http://bennolan.com/behaviour/

Of course, you can just write the for loops yourself, and save your
users from having to download the library file, but this does look
tidy.

Nic

Jan 16 '06 #11

P: n/a
drnicwilliams said the following on 1/16/2006 3:57 AM:
There is a handy library behaviour.js to automate the allocation of
event functions to multiple elements:

http://bennolan.com/behaviour/


Not sure I would trust a JS file from a site that can't even get the
errors out of its own site:

Error: element has no properties
Source File: http://bennolan.com/behaviour/behaviour.js
Line: 128

That is in Firefox.

In IE, there is a syntax error on the main page:

Line 129
Char: 7
Error: Object required
Code: 0
URL: http://bennolan.com/behavior

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Jan 16 '06 #12

P: n/a


Randy Webb wrote:

What are the advantages/disadvantages of using function (evt) over using
a new Function construct?


A function expression
= function (arg) { function body }
is (in my view) the simpler and more natural way to write an expression
that evaluates to a function.
Constructing a function with the Function constructor
= new Function("arg", "string with function body code")
is only needed if you need to construct the parameter name and/or
function body code at runtime from a string. It is much like eval in
that at run time string with source code needs to be evaluated. If you
only use eval if really needed (e.g. you need to construct code at
runtime depending on user input) then you should only use new
Function("code") the same way.
--

Martin Honnen
http://JavaScript.FAQTs.com/
Jan 16 '06 #13

P: n/a
On 16/01/2006 00:33, RobG wrote:
Michael Winter wrote:
On 15/01/2006 19:31, Randy Webb wrote:
What are the advantages/disadvantages of using function (evt) over
using a new Function construct?
Beyond the (potential) differences in scope chain?


I'll save you some typing :-)


Thank you. That's very good of you. :-D
<URL:
http://groups.google.co.uk/group/com...7368f8df727b19
>


I thought I'd written about it before...

Mike

--
Michael Winter
Prefix subject with [News] before replying by e-mail.
Jan 16 '06 #14

P: n/a
I know this isnt teribly related but is the lack of () becuase when you
assign it you're using the source code of that function, the plain
function name used as a varible holds the source code for the function
no?

Jan 17 '06 #15

P: n/a
mo********@gmail.com said the following on 1/16/2006 6:52 PM:

Please quote what you are replying to.

If you want to post a followup via groups.google.com, don't use the
"Reply" link at the bottom of the article. Click on "show options" at
the top of the article, then click on the "Reply" at the bottom of the
article headers.
I know this isnt teribly related but is the lack of () becuase when you
assign it you're using the source code of that function, the plain
function name used as a varible holds the source code for the function
no?


Are you referring to when it is defined you leave off the ()?

Something like this:

window.onload = someFunction;

If so, it assigns a function reference to the onload event. If you add
the () then it assigns the results of that function to the onload.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Jan 17 '06 #16

P: n/a
I can't find the button! Also thanks for the info on function refrences.

Jan 18 '06 #17

P: n/a
mo********@gmail.com said the following on 1/17/2006 7:40 PM:
I can't find the button! Also thanks for the info on function refrences.


It's there Mr. Spock, just find it! :)

Hint: It's a link, not a button.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Jan 18 '06 #18

This discussion thread is closed

Replies have been disabled for this discussion.