Page 1 of 1

Using method as an event handler

Posted: Thu Apr 07, 2005 3:58 pm
by Weirdan
Is it possible? When I tried to use an object's method as an event handler it did loose an association with its object:

Code: Select all

function TableHandler(table) {
   this.table = table;
   this.clickHandler = function(e) {
      alert(this.table);
   }
   if(table.addEventListener)
      table.addEventListener('click', this.clickHandler, false);
   else // IE
      table.onclick = this.clickHandler 
}
When the click event got fired, event handler has no access to this.table (because this variable is pointing to the event's target). I found the way to circumvent this problem in mozilla:

Code: Select all

function TableHandler(table) {
   this.table = table;
   this.handleEvent = function(e) {
      // choose a correct handler, not implemented
      this.clickHandler(e);
   }
   this.clickHandler = function(e) {
      alert(this.table);
   }
   if(table.addEventListener)
      table.addEventListener('click', this, false);
   else // IE
      table.onclick = this.clickHandler 
}
but still curious if it possible to make it work in IE

Posted: Fri Apr 08, 2005 3:45 am
by n00b Saibot
attachEvent() may be useful in this situation...

I will post details if you require so...

Posted: Fri Apr 08, 2005 10:24 am
by Weirdan
I tried the attachEvent() today, and when an object's method is passed to the attachEvent it looses it association with the object (this variable is set to the element which fired the event).

Posted: Sat Apr 09, 2005 3:17 am
by n00b Saibot
Try this simple example. this should get you going
This is the behavior file

Code: Select all

<PUBLIC:ATTACH EVENT=&quote;ondetach&quote; ONEVENT=&quote;cleanup()&quote; />

<SCRIPT LANGUAGE=&quote;JScript&quote;>
attachEvent ('onmouseover', Hilite);
attachEvent ('onmouseout', Restore);

function cleanup()
{
   detachEvent ('onmouseover', Hilite);
   detachEvent ('onmouseout', Restore);
}

function Hilite()
{
   alert(this.id)
   if (event.srcElement == element)
   { 
     normalColor = style.color;  
     runtimeStyle.color  = &quote;red&quote;;
     runtimeStyle.cursor = &quote;hand&quote;;
   }
}

function Restore()
{
   alert(this.id)
   if (event.srcElement == element)
   {
      runtimeStyle.color  = normalColor;
      runtimeStyle.cursor = &quote;&quote;;
   }
}
</SCRIPT>
And this is the main page that calls it.

Code: Select all

<table style=&quote;behavior=url('test.htc'); &quote; id=&quote;Event-Table&quote;>
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>F</td><td>E</td><td>D</td></tr>
<tr><td>G</td><td>H</td><td>I</td></tr>
</table>
this alert the right id which should clear any doubts abt object association loss.

HIH ;)

Posted: Wed Apr 13, 2005 12:24 pm
by Weirdan
It looks you've got me wrong (perhaps I have failed to express what I was trying to achieve, due to my bad English). First code snippet in my initial posting is an object constructor. It creates an object (of type TableHandler) and that was, basically, an attempt to switch to object oriented js.

In the code you posted, there's no objects involved at all.

Posted: Thu Apr 14, 2005 1:53 am
by n00b Saibot
OK. First of all, soryy for not getting your point. Secondly, now that I have it, I will definitely post a solution. Just when I get a little breathing time ;)

Posted: Sun Sep 11, 2005 7:35 pm
by Weirdan
And finally I've found the answer. For those who are curious, it was as simple as copying this variable to the local scope of object's constructor:

Code: Select all

function TableHandler(table) {
   var me = this;
   this.table = table;
   this.clickHandler = function(e) {
      alert(me.table);
   }
   table.onclick = this.clickHandler
}

Posted: Mon Sep 12, 2005 4:42 am
by n00b Saibot
I wrote:I will definitely post a solution. Just when I get a little breathing time
:oops: Sorry for absolutely forgetting this... was like that saying - 'out of sight, out of mind'. :(