/    Sign up×
Community /Pin to ProfileBookmark

Adding Events to Created Elements

Copy linkTweet thisAlerts:
Nov 17.2006

Say I just created a new div:

[CODE]
var div = document.createElement(‘div’);
[/CODE]

Now, I want to add a onmouseover=’myFunc()’; to it. I tried things like:

[CODE]
div.onmouseover = ‘myfunc()’;
[/CODE]

But, nothing seems to work. I am assuming I am doing it the wrong way. Any suggestions on how to do it the right way?

Thanks

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@KravvitzNov 17.2006 — A function is not a string.

div.onmouseover = myfunc;
OR
div.onmouseover = function(){
myfunc();
}
Copy linkTweet thisAlerts:
@intriviousauthorNov 17.2006 — Alright nice, that is a start. Thanks.

Now how do I send myFunc(obj), the div object itself.

Like this?
[CODE]
function myFunc(obj)
{
obj.className = 'someClass';
}

function ini()
{
var div = document.createElement('div');
div.onmouseover = function(){
myFunc(div);
}
}
[/CODE]

But it doesn't seem to pass the actual div object. Should I user 'this' instead?
Copy linkTweet thisAlerts:
@KravvitzNov 17.2006 — If you use the first way (of the two ways I suggest), you don't need to pass a reference to the element. In the event handler the this keyword will automatically point to the div. (That applies to DOM0 events like that. The advanced event models are slightly different.)
Copy linkTweet thisAlerts:
@CharlesNov 17.2006 — [CODE]
function myFunc(obj)
{
obj.className = 'someClass';
}

function ini()
{
var div = document.createElement('div');
div.onmouseover = function(){
myFunc([i]this[/i]);
}
}
[/CODE]
Copy linkTweet thisAlerts:
@intriviousauthorNov 17.2006 — Thanks for the help. On my first attempts, I thought by doing div.onmouseover = 'somefunc()' was actually putting that into the <div onmouseover='here'>. I knew that functions weren't strings.

Problem solved. Thanks again Kravvitz & Charles.
Copy linkTweet thisAlerts:
@KravvitzNov 18.2006 — You're welcome ?

I can definitely understand that you might think it works like that, but in this case, it doesn't. You can use setAttribute() like that in some browsers, but I don't recommend it.
Copy linkTweet thisAlerts:
@intriviousauthorNov 18.2006 — Yea, I have tried the setAttribute() way before, but it is W3C only. It doesn't work for IE.
×

Success!

Help @intrivious 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 5.18,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

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

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...