Adding dynamic events to objects in IE!?

[stephen.cunliffe]

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

 

[RobG]

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/co...lly+add+onclick&rnum=9&hl=en#96b2393ad65dd1aa>
<URL:http://groups.google.co.uk/group/co...ly+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:

 

[Robert]

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.

 

[Donius]

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

-Brendan

 

[RobG]

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>

 

[Robert]

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.....

 

[Michael Winter]

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

 

[Mick White]

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

 

[Michael Winter]

[...] 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

 

[Mick White]

[...] 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

 

[Robert]

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.