/    Sign up×
Community /Pin to ProfileBookmark

event property doesn’t accept code?

Copy linkTweet thisAlerts:
Jul 02.2006

I tried to assign code to event property and it didn’t work. But when i used function name instead, it works fine. I just want to make sure whether event property accept code or not.

NOT WORKING

[Quote]

var bok = document.createElement(“img”)
bok.setAttribute(“src”,”picture/123.gif”)
bok.onmouseover = “bok.setAttribute(“src”,”picture/abc.gif”);”
bok.onmouseout = “bok.setAttribute(“src”,”picture/123.gif”);”

[/Quote]

WORKING

[Quote]

function over(){this.src = “picture/abc.gif”}
function out(){this.src = “picture/123.gif”}
var bok = document.createElement(“img”)
bok.setAttribute(“src”,”picture/123.gif”)
bok.onmouseover = over
bok.onmouseout = out

[/Quote]

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@tabzterJul 02.2006 — var bok = document.createElement("img")

bok.setAttribute("src","picture/123.gif")

bok.onmouseover = [B]function() {[/B]bok.setAttribute("src","picture/abc.gif");[B]};[/B]

bok.onmouseout = [B]function() {[/B]bok.setAttribute("src","picture/123.gif");[B]};[/B]
Copy linkTweet thisAlerts:
@homer_j_simpsonauthorJul 02.2006 — Thanks it works. But another thing i like to ask is, whenever i passed parameter value along with the function it didn't work. It works only without parameter. Am i using wrong syntax?

NOT WORKING

function change(imgsrc){this.src = imgsrc;}

b_ok.onmouseout = change("picture/abc.gif");
[/Quote]

WORKING

function change(){this.src = "picture/abc.gif";}

b_ok.onmouseout = change;
[/Quote]
Copy linkTweet thisAlerts:
@KravvitzJul 02.2006 — Using the parentheses calls the function. You need to assign a function to be called when the event is triggered. You can use anonymous functions for this.
b_ok.onmouseout = function() {this.src = "picture/abc.gif";}OR
b_ok.onmouseout = function() {change("picture/abc.gif");}
depending on how you want to do it.
Copy linkTweet thisAlerts:
@KarthikkJul 03.2006 — Hi simpson,

I am new to javascript working for just a month on it,

But i too faced the same problem, but what i could understand is it was,

we can just give the function name not call with the parameters,

But when you call the function the first implicit parameter passed the event (type of event i suppose),

I also observed that we can get the type of element on which this event occurs,

I too couldnt pass the variable along with it,

Just felt like sharing this,
Copy linkTweet thisAlerts:
@JulianJJul 03.2006 — Javascript automatically calls the event with one parameter which is the event object. It is possible to add more parameters. Here is an example of how, not my code originally:

<i>
</i>function entries ( collection )
{
var result = [];

<i> </i>for ( var i = 0; i &lt; collection.length; i++ )
<i> </i> result.push ( collection[ i ] );

<i> </i>return result;
}

Function.prototype.bindAsEventListener = function ( object )
{
var __method = this;
var args = entries ( arguments ).slice ( 1 );
return function ( event )
{
return __method.call ( object, event || window.event, args );
}
}


to use this just do

<i>
</i>someobject.onclick = this.nameOfMyFunction.bindAsEventListener ( this, 'extraArg', anotherArg );


For a good discussion on how to preserve the 'this' keyword and how to pass arguments, read this: http://www.brockman.se/writing/method-references.html.utf8

It is kinda overkill for passing arguments but every Javascript programmer should know how to do the things discussed in the link above.

Julian
Copy linkTweet thisAlerts:
@KravvitzJul 03.2006 — Javascript automatically calls the event with one parameter which is the event object.[/QUOTE]
Yes, if the browser supports the DOM2 Events module. IE does not. IE has window.event instead.
Copy linkTweet thisAlerts:
@homer_j_simpsonauthorJul 03.2006 — Thanks for ur advice kravvitz.

Thanks for ur code JulianJ, though it will take me awhile to understand.

Thanks for sharing Karthikk.
×

Success!

Help @homer_j_simpson spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...