473,320 Members | 1,828 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

addEventListener / attachEvent inside a class

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)
}

Dec 2 '05 #1
2 6050
:-) 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.

Dec 2 '05 #2
rhamlin wrote:
[...]


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
Dec 3 '05 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
by: Joe Kelsey | last post by:
When you use addEventListener (or addEvent in IE) to call an object method, does it call it with the correct this parameter? The ECMAScript reference has a lot to say about the caller using...
4
by: PJ | last post by:
Is it possible to extend the Node object so that the DOM function addEventListener can be used w/ IE? Does anyone have an example of this? Thanks, Paul
1
by: philjhanna | last post by:
Hi I'm having a problem applying return false to a div via addEventListener. I'm adding this so that I can drag (click-hold-move) over an image. (Its so that I can add zooming to the image)...
4
by: Liming | last post by:
Hello all, I have a custom class object with some prototype methods like setKeyDownEvent, etc. The problem is on my webpage, after I instantiate the class, I try to do .addEventLister() to a...
5
by: Bert | last post by:
Hello, I'm having some problems with creating a script that works on both Mozilla browsers as IE. I want to change the background color of textareas and input text fields as soon as somebody...
3
by: Jake Barnes | last post by:
37 Signals has built some awesome software with some features I wish I knew how to imitate. When I'm logged into my page (http://lkrubner.backpackit.com/pub/337271) any item that I mouseOver I'm...
10
by: Peter Michaux | last post by:
Hi, Today I have been testing the event models from Netscape 4.8 and IE 4 to the current crop of browsers. I'd like to write a small event library similar in purpose to the Yahoo! UI event...
10
by: Janus | last post by:
Hi, Is there a way to pass arguments to the callback function used inside an addEventListener? I see that I can only list the name of the callback function. For eg, I use this: var...
0
by: wpjoju | last post by:
i have this code which adds an event listener to a newly opened window but it doesn't seem to work in google chrome. the problem is window.addEventListener seem to work in chrome but if you do...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.