Using method as an event handler

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Using method as an event handler

Post 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
Last edited by Weirdan on Sun Sep 11, 2005 7:28 pm, edited 1 time in total.
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post by n00b Saibot »

attachEvent() may be useful in this situation...

I will post details if you require so...
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Post 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).
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post 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 ;)
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Post 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.
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post 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 ;)
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Post 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
}
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post 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'. :(
Post Reply