[Beginner] Associating event handlers with elements

[Pekka Karjalainen]

Hi, this is my first posting here. I also have a question about etiquette.
There's a html file associated with my question. I cannot host it
indefinitely at the current location. I don't, however, want to reproduce
it here, since it is a little unwieldy for that.

So, is it poor etiquette to refer to external files in postings, since the
postings will be archived, but the external files are not permanent?
Should I find a permanent home for further files that I may need with
further questions?

Someone might find this posting from the archives in N years to come,
after all.

* * *

Now, on to my question!

I want to build a table that knows where it has been clicked. I found the
following solution myself. Are there better ones?

http://www.student.oulu.fi/~pkarjala/question1.html
(tested on Mozilla 1.7.8/Linux)

It sets the event handlers for each TD in the build() loop, including a
parameter in the function call that is different for each TD.

The whole thing is a simple example with a table with 5 by 5 cells. If you
click on a cell it's supposed to change color. Naturally, my question is
one more general terms. How to make big tables that associate various
event handlers with various cells, and where you will know exactly which
element triggered the event? How to make it simple and maintainable?

--
Pekka Karjalainen - Oulu, Finland

[Markis Taylor]

Are you trying to figure out which cell in the table was clicked or
were you trying to find the exact x, y coordinates of where the mouse
clicked in the table?

[Danny]

There are a couple of ways of binding event listeners:

OBJECT.EVENTTOLISTEN=HANDLERWITHNOARGUMENTS;
or DOM
OBJECT.addEventListener(sEVENT,oHANDLERWITHNOARGUM ENTS);
or for IE's
OBJECT.attachEvent(sEVENT,oHANDLERWITHNOARGUMENTS) ;
where HANDLERWITHNOARGUMENTS is usually a function called

Now, tables have a cells[] collection you can access and a rows[]
collection, you can iterate through either or both, and each node has its
own childNodes[] collection you can also iterate through doing the event
binding.

a 3rd technique is using a listener on the parent element and checked the
bubbled object

document.onclick=something;

function something(ev) {
// in IE the evented node will be event.srcElement
// in mozilla/opera(opera uses either target or srcElement) the node is
ev.target
alert(ev.target.nodeName) // will show the element tagName, so, if you
click on a cell, it'll be 'TD'

}

Using the 3rd tecnique, you set the event listening ONCE and check the
child that was evented and process accordingly, without having to bind a
handler/listener to each on a loop.

Danny

--
Using Opera's revolutionary e-mail client: http://www.opera.com/mail/

[Jim Ley]

On Tue, 9 Aug 2005 14:57:55 +0000 (UTC), Pekka Karjalainen
<pk******@mail.student.oulu.fi> wrote:

So, is it poor etiquette to refer to external files in postings, since the
postings will be archived, but the external files are not permanent?
Should I find a permanent home for further files that I may need with
further questions?
If you've got a permanent home then all the better, but there's
nothing particularly wrong with just linking to the file even if you
can't guarantee it's permanent, I certainly wouldn't use it to stop
you asking, or pasting too much in the post!
I want to build a table that knows where it has been clicked. I found the
following solution myself. Are there better ones?

http://www.student.oulu.fi/~pkarjala/question1.html
(tested on Mozilla 1.7.8/Linux)

It sets the event handlers for each TD in the build() loop, including a
parameter in the function call that is different for each TD.
createAttribute is not a good way to create event handlers.

x.onclick=functionRef

is much better, it's debateable if createAttribute should even create
an event handler...
The whole thing is a simple example with a table with 5 by 5 cells. If you
click on a cell it's supposed to change color. Naturally, my question is
one more general terms.

It would probably just be better to catch a single click at a higher
level, and then see which element was actually clicked...

Jim.

[Pekka Karjalainen]

Markis Taylor asked:

Are you trying to figure out which cell in the table was clicked or
were you trying to find the exact x, y coordinates of where the mouse
clicked in the table?
No, I don't need the exact coordinates. I'd just like to divvy up a
larger element into components and know which one is being manipulated.

Jim Ley wrote: If you've got a permanent home then all the better, but there's
nothing particularly wrong with just linking to the file even if you
can't guarantee it's permanent, I certainly wouldn't use it to stop
you asking, or pasting too much in the post!
As long as my questions are really basic I doubt anybody will miss
seeing my files afterwards, so I won't worry about it now. I might only
need to know a little bit of JAvaScript after all. This thing I posted
about might be useful in prototyping something that I'll then rewrite in
something else.
createAttribute is not a good way to create event handlers.

x.onclick=functionRef

is much better, it's debateable if createAttribute should even create
an event handler...

Thanks for the advice. I need to read my references more carefully to
spot basics like x.onclick!
It would probably just be better to catch a single click at a higher
level, and then see which element was actually clicked...

Can you give an example or a simple outline of how to implement this
cleanly in Javascript? Doesn't this involve manipulating coordinates or
something similar? I'd like a solution that does not require special
knowledge of how big things are (in pixels), and probably I'm not just
seeing what you are suggesting properly.

Thanks for the responses.
--
Pekka Karjalainen - Oulu, Finland