addEventListener / attachEvent inside a class

[rhamlin]

I'm working on a class.

When instantiating I pass the variable name referencing the class (vw)
and the page object where the class will display (view).

In this class I create a DIV. I also place a DIV inside the first which
will act as a button and when clicked will run code that's also inside
the class.

To create the button DIV I use the addBtn function inside the class.
In addBtn() I use setAttribute for the onmouseover event and create the
string "vw.btnOver()" as the value.
This works great and insures that the correct object.function is
called.

I'm working with FoxFire (FF) and IE and the problem is this only works
in FF. I've found that IE doesn't register events using setAttribute.
OK...I can rewrite to use addEventListener/attachEvent.

In all my websurfing the examples show addEventListener/attachEvent
referencing a stand alone function with global scope. My function is
inside a class. I just can't figure out how to attach a function that
is a method of a class variable.

I think I tried the following and it didn't work...
obj.addEventListener('click', this.objHandle +'.btnOver', false)
obj.attachEvent('onclick', this.objHandle +'.btnOver')
....and this is because I'm using a string with a value of 'vw.btnOver'
and these functions need a function reference not a string. Do I have
to use eval()?

How do you do it? Thanks in advance.


Here's some abbreviated code of the class I'm working on...

var vw = new viewClass('vw', 'view');

function viewClass(objHandle,pageObjID) {
this.objHandle = objHandle;
this.pageObjID = pageObjID;
this.init();
}
viewClass.prototype.init = function() {
this.vwB = document.createElement('DIV');
this.vwB.id = this.pageObjID + 'VWB';
this.addBtn( 'Filter', 'mbFilter.png' );
}
viewClass.prototype.addBtn = function(txt,img) {
myBtn = document.createElement('DIV');
myBtn.id = this.pageObjID + 'VWBtn';
myBtn.setAttribute('onMouseOver', this.objHandle +'.btnOver(this);');
}
viewClass.prototype.btnOver = function(btnObj) {
(do action code)
}

 

[rhamlin]

Amazing how you come up with this stuff after you post. Here's my
answer.

My original function to add a button with an event was this...

viewClass.prototype.addBtn = function(txt,img) {
myBtn = document.createElement('DIV');
myBtn.id = this.pageObjID + 'VWBtn';
myBtn.setAttribute('onMouseOver', this.objHandle
+'.btnOver(this);');
}

The change is this...

viewClass.prototype.addBtn = function(txt,img) {
myBtn = document.createElement('DIV');
myBtn.id = this.pageObjID + 'VWBtn';

var thisClass = this;
var thisBtn = myBtn;
var func = function() { thisClass.btnOver(thisBtn); };

if (myBtn.addEventListener)
{ myBtn.addEventListener('mouseover', func, false);
} else if (myBtn.attachEvent){ myBtn.attachEvent('onmouseover',
func);
}
}

....you must create a seperate reference to the class object
var thisClass = this;

....you must create a seperate reference to the button object
var thisBtn = myBtn;

....I created a variable to a function to readability. The function
calls my class method btnOvr using the button object as an argument.

var func = function() { thisClass.btnOver(thisBtn); };

works in both browsers.

 

[Thomas 'PointedEars' Lahn]

[...]

What you are talking about is a prototype (object), not a class.
JavaScript < 2.0/JScript < 7.0 (.NET)/ECMAScript < 4 are object-oriented
programming languages using prototype-based, not class-based, inheritance.

| viewClass.prototype.addBtn = function(txt,img) {
| myBtn = document.createElement('DIV');

Do you really want to create this _global_ _variable_?
If you say "yes" here: Why are you using prototypes then?


PointedEars