470,648 Members | 1,672 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,648 developers. It's quick & easy.

Adding dynamic events to objects in IE!?

Hi,

Okay, here's my problem...

I'm dynamically building some content (similar to this):

var fooObj = document.createElement('div');
fooObj.setAttribute('id', 'uniqueNumber');

etc.

The issue I have, is that I want to do (similar to this):

fooObj.setAttribute('onclick', 'func1();func2(' + some.dyn.reference +
');return false;');
Of course, it works like butta, in *Mozilla*, and *Opera*... but _IE_
just quietly ignores it...

-------------------

Now, I know I can use:

fooObj.click = nameOfFuncWithNoQuotesOrBrackets;

but, I'm limited to 1 (one) function, and *more* importantly, I can't
pass a parameter to the function... (IIRC)

-------------------

Looking for ideas... ;-)

Please keep in mind though...

a.) I *have* to dynamically create this element (it doesn't exist until
run-time)
b.) I *have* to be able to pass parameter(s)
c.) *Ideally* I would like to be able to call several consecutive
statements (e.g. any combo of js stmts / functions / returns), however
if I can call one function with parameters, I *suppose* I can make that
function in turn call the one(s) I need.

d.) Allthough I would really like this to work in IE too, if it turns
out that it can't, well, that's okay too... This would likely be the
'official' last straw in supporting this Browser for this mini-app.
(read: Debugging in IE is like shaving with a chainsaw... you *could*
do it, but why even try!)

Cheers,
Steve

Sep 7 '05 #1
10 6437
st**************@gmail.com wrote:
Hi,

Okay, here's my problem...

I'm dynamically building some content (similar to this):

var fooObj = document.createElement('div');
fooObj.setAttribute('id', 'uniqueNumber');

I'm pretty sure if you search this newsgroup you'll find a solution to
that, but see below.
etc.

The issue I have, is that I want to do (similar to this):

fooObj.setAttribute('onclick', 'func1();func2(' + some.dyn.reference +
');return false;');
fooObj.onclick = function() {
// statements using parameters
};

This creates an anonymous function, be careful with closures[1]. You
can also create a function that adds the onclick and you pass your
parameters to it:

var fooObj = document.createElement('div');
addOnclick(fooObj, parm1, parm2);
...
}

function addOnclick(obj, p1, p2)
{
obj.onclick = function() {
// Statements using p1 and p2
}
}

The second method may solve some closure issues.

In the first method, the parameters are evaluated when the onclick runs
which is handy if you want them to be sort of like globals - their value
may change other than through the onlclick. In the second method,
parameters are passed to addOnclick and evaluated when added to the
element so they should not change.

1. See the group FAQ notes:

<URL:http://jibbering.com/faq/faq_notes/closures.html>

2. Here are some threads that may be of interest:

<URL:http://groups.google.co.uk/group/comp.lang.javascript/browse_frm/thread/fbf6b4f6c9dc1806/96b2393ad65dd1aa?q=dynamically+add+onclick&rnum=9& hl=en#96b2393ad65dd1aa>
<URL:http://groups.google.co.uk/group/comp.lang.javascript/browse_frm/thread/b58ee83c15103497/bcbd2eaa0ffa3c1d?q=dynamically+add+onclick&rnum=13 &hl=en#bcbd2eaa0ffa3c1d>
[...] Please keep in mind though...

a.) I *have* to dynamically create this element (it doesn't exist until
run-time)
Not a problem
b.) I *have* to be able to pass parameter(s)
Not a problem
c.) *Ideally* I would like to be able to call several consecutive
statements (e.g. any combo of js stmts / functions / returns), however
if I can call one function with parameters, I *suppose* I can make that
function in turn call the one(s) I need.
You can add multiple functions if you like, with lots of parameters

d.) Allthough I would really like this to work in IE too, if it turns
out that it can't, well, that's okay too... This would likely be the
'official' last straw in supporting this Browser for this mini-app.
(read: Debugging in IE is like shaving with a chainsaw... you *could*
do it, but why even try!)
The above will work in IE too. There are reasonable debugging solutions
for IE, some require MS Office or Visual Studio to get them (search the
newsgroup, there's a recent series of posts regarding debugging in IE).
Here's one:

<URL:http://groups.google.co.uk/group/comp.lang.javascript/browse_frm/thread/4e1ef68ed8443aff/8c4dd4a80dafb832?q=IE+debugging+&rnum=13&hl=en#8c4 dd4a80dafb832>

Cheers,
Steve

--
Rob
Sep 7 '05 #2
RobG wrote:
var fooObj = document.createElement('div');
addOnclick(fooObj, parm1, parm2);
...
}

function addOnclick(obj, p1, p2)
{
obj.onclick = function() {
// Statements using p1 and p2
}
}

The second method may solve some closure issues.


Doesn't this create a memory leak in IE too?
The DOM Node with the event handler is now in the same scope, creating a
circular reference. I thought.....
That's why I always do something like:

var fooObj = document.createElement('div');
fooObj.onclick = addOnclick(parm1, parm2);
...
}

function addOnclick(p1, p2)
{
return = function() {
// Statements using p1 and p2
}
}

Robert.
Sep 8 '05 #3
I've heard a lot about this "circular reference" with the DOM...can you
more clearly explain this scope / mem leak issue?

-Brendan

Sep 9 '05 #4
Donius wrote:
I've heard a lot about this "circular reference" with the DOM...can you
more clearly explain this scope / mem leak issue?

-Brendan


The first link in my post above:

<URL:http://jibbering.com/faq/faq_notes/closures.html>

--
Rob
Sep 11 '05 #5
RobG wrote:
Donius wrote:
I've heard a lot about this "circular reference" with the DOM...can you
more clearly explain this scope / mem leak issue?

-Brendan


The first link in my post above:

<URL:http://jibbering.com/faq/faq_notes/closures.html>


Would you like to respond to my question regarding your example and
whether that does or does not create a memory leak?
Your example was:

var fooObj = document.createElement('div');
addOnclick(fooObj, parm1, parm2);
...
}

function addOnclick(obj, p1, p2)
{
obj.onclick = function() {
// Statements using p1 and p2
}
}
The DOM Node with the event handler is now in the same scope, creating a
circular reference. I thought.....

Sep 12 '05 #6
On 12/09/2005 15:12, Robert wrote:

[snip]
function addOnclick(obj, p1, p2)
{
obj.onclick = function() {
// Statements using p1 and p2
}
}

The DOM Node with the event handler is now in the same scope,
creating a circular reference.


Yes, but easily fixed by assigning null to the obj argument after the
listener has been added. If the listener needs to refer to that element,
it can use the this operator.

Mike

--
Michael Winter
Prefix subject with [News] before replying by e-mail.
Sep 13 '05 #7
Michael Winter wrote:
On 12/09/2005 15:12, Robert wrote:

[snip]
function addOnclick(obj, p1, p2)
{
obj.onclick = function() {
// Statements using p1 and p2
}
}

The DOM Node with the event handler is now in the same scope,
creating a circular reference.

Yes, but easily fixed by assigning null to the obj argument after the
listener has been added. If the listener needs to refer to that element,
it can use the this operator.

Like this?
function addOnclick(obj, p1, p2){
obj.onclick = function() {
// Statements using p1 and p2
obj=null;
}
}

Puzzled.
Mick
Sep 13 '05 #8
On 13/09/2005 15:00, Mick White wrote:
Michael Winter wrote:
[...] assigning null to the obj argument after the listener has
been added. [...]


Like this?
function addOnclick(obj, p1, p2){
obj.onclick = function() {
// Statements using p1 and p2
obj=null;
}
}


No.

function addOnclick(obj, p1, p2) {
obj.onclick = function() {
/* ... */
};
obj = null;
}

After the listener has been added. :)

Mike

--
Michael Winter
Prefix subject with [News] before replying by e-mail.
Sep 13 '05 #9
Michael Winter wrote:
On 13/09/2005 15:00, Mick White wrote:
Michael Winter wrote:
[...] assigning null to the obj argument after the listener has been
added. [...]

Like this?
function addOnclick(obj, p1, p2){
obj.onclick = function() {
// Statements using p1 and p2
obj=null;
}
}

No.

function addOnclick(obj, p1, p2) {
obj.onclick = function() {
/* ... */
};
obj = null;
}

After the listener has been added. :)

OK, I think I have it now.
Thanks.
Mick
Sep 14 '05 #10
Michael Winter wrote:
On 12/09/2005 15:12, Robert wrote:

[snip]
function addOnclick(obj, p1, p2)
{
obj.onclick = function() {
// Statements using p1 and p2
}
}

The DOM Node with the event handler is now in the same scope,
creating a circular reference.

Yes, but easily fixed by assigning null to the obj argument after the
listener has been added. If the listener needs to refer to that element,
it can use the this operator.


K thanks!
Didn't know it was that easy to avoid the memory leak in this case.
Sep 16 '05 #11

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by Tim Marsden | last post: by
2 posts views Thread by Jörn von Holten | last post: by
reply views Thread by Pascal Costanza | last post: by
1 post views Thread by Kenneth Siewers Møller | last post: by
4 posts views Thread by Mike Lowery | last post: by
7 posts views Thread by Christopher Pisz | last post: by
1 post views Thread by Korara | last post: by
reply views Thread by warner | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.