Mozilla doesn't handle function pointer well?

N

nick

I have the following code:
var ocevent = function(v)

{

alert('javascript event: u clicked '+v);

return false;

};

var items = {

"002.jpg": {text:"002", href:"#", click:function(){return ocevent(2)} },

"003.jpg": {text:"003", href:"#", click:function(){return ocevent(3)} },

....}

And I use the following code to assign the click property to onclick of
anchor.

a.setAttribute('onclick', items[id].click);

However, the code works well in IE but not in Mozilla Firefox. To test the
code go to:

http://greywolfdesign.com/tmp/gallery/gallery.htm

Any suggestion for function pointers?
 
M

Michael Winter

[snip]
And I use the following code to assign the click property to onclick of
anchor.

a.setAttribute('onclick', items[id].click);

However, the code works well in IE but not in Mozilla Firefox.

That's because IE doesn't conform to standards. The setAttribute method
takes two string arguments, but IE allows any type for the second.

The solution is simple: don't use setAttribute. At all. All the attributes
you set in that code can, and should be, set using the relevant properties.
Any suggestion for function pointers?

There's no such thing as a pointer in Javascript. They're references.

Mike
 
L

Lee

nick said:
I have the following code:
var ocevent = function(v)

{

alert('javascript event: u clicked '+v);

return false;

};

var items = {

"002.jpg": {text:"002", href:"#", click:function(){return ocevent(2)} },

"003.jpg": {text:"003", href:"#", click:function(){return ocevent(3)} },

...}

And I use the following code to assign the click property to onclick of
anchor.

a.setAttribute('onclick', items[id].click);

A little testing shows that the problem isn't with function
references, but with the way you're assigning the onclick
event handler. Don't use setAttribute() to set event handlers.
Much simpler and more robust:

a.onclick=items[id].click;
 
N

nick

Thanks, right, the right term should be function reference, but quite a few
web site use term function pointer,

when i define the function reference in the following array, I had to wrap
the ocevent function with another anonymous function. Anyway to avoid it?
var ocevent = function(v)

{

alert('javascript event: u clicked '+v);

return false;

};

var items = {

"002.jpg": {text:"002", href:"#", click:function(){return ocevent(2)} },

"003.jpg": {text:"003", href:"#", click:function(){return ocevent(3)} },



Michael Winter said:
[snip]
And I use the following code to assign the click property to onclick of
anchor.

a.setAttribute('onclick', items[id].click);

However, the code works well in IE but not in Mozilla Firefox.

That's because IE doesn't conform to standards. The setAttribute method
takes two string arguments, but IE allows any type for the second.

The solution is simple: don't use setAttribute. At all. All the attributes
you set in that code can, and should be, set using the relevant
properties.
Any suggestion for function pointers?

There's no such thing as a pointer in Javascript. They're references.

Mike
 
M

Michael Winter

Thanks, right, the right term should be function reference, but quite a
few web site use term function pointer,

Pointer is a term to be associated with memory addresses. As Javascript
doesn't expose that information, it isn't the right term to use.
when i define the function reference in the following array, I had to
wrap the ocevent function with another anonymous function. Anyway to
avoid it?

If you want to pass an argument, what you've got is probably the most
reliable way. You'd probably have to restructure your code, completely. I
might be wrong, though.

[snip]
news:eek:pse5cajqcx13kvk@atlantis...

Please don't top-post. Write your responses in conversation order; placed
below the text you are directly responding to. Remove everything else
(preferably indicating when you do).

[snip]

Mike
 
T

Thomas 'PointedEars' Lahn

nick wrote:

[Pretty-printed the source code]
var ocevent = function(v)
{
alert('javascript event: u clicked '+v);
return false;
};

It would be both more reasonable and downwards compatible to write

function ocevent(v)
{
alert('javascript event: u clicked ' + v);
return false;
}
var items = {
"002.jpg": {text:"002", href:"#", click:function(){return ocevent(2)} },
^^^^^^^^
What will users do without support for client-side scripting?
"003.jpg": {text:"003", href:"#", click:function(){return ocevent(3)} },
...}

It would be more downwards compatible if you used both the Object and
Function constructors:

var items = new Object();
items["002.jpg"] = new Object();
items["002.jpg"].text = "002";
items["002.jpg"].href = "#"; // TODO!
items["002.jpg"].click = new Function("return ocevent(2);");

items["003.jpg"] = new Object();
items["003.jpg"].text = "003";
items["003.jpg"].href = "#"; // TODO!
items["003.jpg"].click = new Function("return ocevent(3);");

However, whether you want that depends on the (age of) UAs you want
to support. Object literals require at least JavaScript 1.1 or an
ECMAScript 3 compliant language implementation; the `function'
operator is available from JavaScript 1.5 and ECMAScript 3 on.
And I use the following code to assign the click property to onclick of
anchor.

a.setAttribute('onclick', items[id].click);

It is because you are assigning a Function object reference to an
attribute where a (DOM) string is expected. It is not a bug in
setAttribute() in Firefox, it is your misuse of that method and
probably a weird implementation in IE to convert the reference
into a string (by calling the toString() method of the referenced
Function object). Either pass a string

a.setAttribute('onclick', "return ocevent(3)");

or assign the function reference to the `onclick' property of the object
referenced with "a":

a.onclick = items[id].click;

However, I do not know if the former with IE, in fact I am almost certain
it does not work with IE prior to version 5 (as those versions do not
support the W3C DOM); the latter technique on the other hand should work
with all browsers that support client-side scripting (taking into account
that `a' refers to an HTMLAnchorElement object or its equivalent).

However, the recommended standards compliant technique as of the W3C DOM
Level 2 Events Specification is

a.addEventListener('click', function() { return ocevent(3); }, false);

See also registerEvent() in said:
Any suggestion for function pointers?

See above. As for the latter, there are no function pointers, since
there are no (accessible) pointers, in JavaScript 1.x and ECMAScript
implementations.


PointedEars
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,904
Latest member
HealthyVisionsCBDPrice

Latest Threads

Top