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="e;ondetach"e; ONEVENT="e;cleanup()"e; />
<SCRIPT LANGUAGE="e;JScript"e;>
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 = "e;red"e;;
runtimeStyle.cursor = "e;hand"e;;
}
}
function Restore()
{
alert(this.id)
if (event.srcElement == element)
{
runtimeStyle.color = normalColor;
runtimeStyle.cursor = "e;"e;;
}
}
</SCRIPT>
And this is the main page that calls it.
Code: Select all
<table style="e;behavior=url('test.htc'); "e; id="e;Event-Table"e;>
<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

Sorry for absolutely forgetting this... was like that saying - 'out of sight, out of mind'.
