JS class + events

[TheC0der]

Hello all.
Im writing a class for context menus in web pages. I have problem with
accessing properties of my class from event function. To understand my
question i will paste a test code.

[script]
function myClass() {
this.a = 'test1';
this.b = 'test2';

this.MDown = function () {
alert(this.a); // I need to access variable a from myClass. But this
return error because "this" in this case refers to the HTML element the
event is handled by
}

document.addEventListener('mousedown', this.MDown, false);
}

var a = new myClass();
[/script]
Edit/Delete Message

[RobG]

TheC0der wrote:

Hello all.
Im writing a class for context menus in web pages. I have problem with
accessing properties of my class from event function. To understand my
question i will paste a test code.

It helps greatly if you indent your code to make it easy to read:

function myClass() {
this.a = 'test1';
this.b = 'test2';

this.MDown = function () {
alert(this.a);
/* I need to access variable a from myClass. But this return
error because "this" in this case refers to the HTML element
the event is handled by
*/

}
document.addEventListener('mousedown', this.MDown, false);
}

var a = new myClass();
When you call myClass() as a constructor, its this keyword refers to
the new object, hence the last line of code creates a new instance of
myClass and assigns it to the global variable 'a', which has properties
a, b and MDown.

However, the value of the this value inside the anonymous function
assigned to a.MDown is evaluated when the function is called and
therefore is determined by how you call the function, not necessarily
by how you declared it.

The this value within a function refers to the object that the function
is called as a method of, or if that can't be determined, the
global/window object.

In Firefox, the this value of a function assigned to an element's
intrinsic event handler by addEventListener and called by an event will
reference the element. In IE, the this value of a function attached
using attachEvent and called by an event will reference the window
object.

If you want MDown() to alert the value of the myClass object's a
property (i.e. a.a) and have it work with both Mozilla and IE event
models, then use the following. It may also help if the values for a
and b are passed to the function rather than being hard coded:

function myClass(aVar, bVar) {
this.a = aVar;
this.b = bVar;

this.MDown = function () {
alert(aVar);
}
if (document.addEventListener){
document.addEventListener('mousedown', this.MDown, false);
} else if (document.attachEvent){
document.attachEvent('onmousedown', this.MDown);
}
}

var a = new myClass('blah 1', 'blah 2');

Note however that this creates a closure between the event handler and
the 'a' object and may lead to "memory leak"[1] problems in IE:

<URL: http://www.jibbering.com/faq/faq_not...res.html#clMem >
1. I have a problem with that term as it is (to me) counter-intuitive.
Memory isn't 'leaking' away, it is being consumed. I guess it refers
to the fact that free memory appears to be leaking. However, I'm not
likely to change jargon that has been entrenched for decades just by
whining about it here. :-)
--
Rob