Cross browser event handling within an object

attachEvent not working, addEventListener is working....

[PHP_Chimp]

I have an object that is dealing with some events. The addEventListener version of the code is working, however the attachEvent version is not working, neither is the direct version.

var thisObj = this;
// event handling
if (grandKids[j].addEventListener) {
grandKids[j].addEventListener('mouseover', function(e) {thisObj.show(e).call(thisObj)}, false);
grandKids[j].addEventListener('mouseout', function(e) {thisObj.hide().call(thisObj)}, false);
}
else if (grandKids[j].attachEvent) {
grandKids[j].attachEvent('onmouseover', function() {thisObj.show().call(thisObj)});
grandKids[j].attachEvent('onmouseout', function() {thisObj.hide().call(thisObj)});
}
else {
grandKids[j].onmouseover = thisObj.show().call(thisObj);
grandKids[j].onmouseout = thisObj.hide().call(thisObj);
}

I have similar versions of this code for other applications, however none of those are within objects. So I am guessing that the problem is something to do with this.
Any ideas would be appreciated.

[daveVk]

Pass the event parameter "e" in 2nd case the same as 1st case ?

In 3rd case try

grandKids[j].onmouseover = thisObj.show(event).call(thisObj);

[PHP_Chimp]

Pass the event parameter "e" in 2nd case the same as 1st case ?

I believe that IE (attachEvent) doesn't pass the actual event, so you use something like:

function show(e) {
if (!e) var e = window.event; // deal with IE
// function code
}

Although I have tried passing the e variable as well and it didnt work.

I didnt try it for the else case, although javascript doesnt set an event variable to be sent to the function. So while I will give it a try I cant see that it would work.

[daveVk]

I take your point 2 case does not need "e" as it applies to IE only.

There are differences in the IE event object and a standard event object, do you have reason to think the error relates to the code you have shown as opposed to the internals of show and hide ?

What browser does the third case need to work for ( or was tested on ) ?

[PHP_Chimp]

The third case was really just their for anything that didnt either follow the addEventListener or attachEvent. Although I guess that a browser that old wouldnt allow for creation of nodes, so it is probably a pointless else statement.

I tested the show and hide functions independently of the object and they worked, so I dont think that they are at fault.

show = function(e) {
if (!e) {var e = window.event;}
// Location of event
var posX = 0;
var posY = 0;
var targ = null;
targ = e.target ? e.target : e.srcElement;
if (e.pageX ¦¦ e.pageY) {
posX = e.pageX;
posY = e.pageY;
}
else if (e.clientX ¦¦ e.clientY) {
posX = e.clinetX;
posY = e.clientY;
posX += document.body.scrollLeft + document.documentElement.scrollLeft;
posY += document.body.scrollTop + document.documentElement.scrollTop;
}
// text for infoPopup
var targId = targ.getAttribute('id');
var re = new RegExp('^' + this.infoWindowId + '(\\d+)$');
// window.alert('re string: ' + re.toString());
targId = re.test(targId);
targId = RegExp.$1;
text = this.infoArray[targId];
this.createPopup(posX, posY, text);
}

The hide function just removes the element with the correct id, so is very unlikely to be at fault.

The createPopup function is creating a div and textNode and a bit of styling, so it is unlikely to be that function that is at fault.

[daveVk]

I may be off topic here but having difficulty with

thisObj.show().call(thisObj)

my understanding is .call applies to a function, but thisObj.show() does not return a function ? If the object
is to just call show on thisObj then would the following suffice.

thisObj.show.call(thisObj)
or just
thisObj.show()

[PHP_Chimp]

The call [developer.mozilla.org] gives the scope of the function. As javascript isnt an object orientated language you get a change in this depending on how you arrive at that function.

So the call method is their to make sure that the correct objects method is called. It should work without the call method, however it doesnt. I am at a loss as to why.
Their is a chance of this with the event handling function. As the first time the event occurs no error is generated, however the second time their is an error. However the call method results in the correct code getting executed.

I am beginning to think that I should have resisted my OOP impulses and written procedural code.

[daveVk]

My understanding is that

thisObj.show().call(thisObj)

is different from

thisObj.show.call(thisObj)

In the second case a method called show will execute with "this" set to thisObj

In the first case the method called will depend upon what is returned from executing thisObj.show(), it is equiv to:

var X = thisObj.show();
X.call(thisObj);

Your function call does not have a return statement, not sure what is returned by default.