Event handlers, OO and function context

[wolverine]

Hi,
I am writing a javascript code that parses dom and finds event
handlers attached to mouseover events. Then i will replace the
existing handler say B() with my own function say A(). When the event
happen and control comes to my function A(), after doing required
processing i will call B() as shown below

<a href = "abc.com" mouseover = "B();"> link </a>

while parsing i will have (trimmed down version)

var oldHandler = node.onmouseover;
node.onmouseover = A;

function A()
{
/ * my code */
oldHandler.call(this);
}

This was working fine as long as B() was a global function. I started
getting problems when B was a member function. For eg:

function Alerter(text)
{
this.text=text;
var me=this;
this.invoke=function ()
{
alert(this.text);
}
}
var sayHi = new Alerter('Hello, world!');

The web developer would have code like
<a href = "abc.com" mouseover = "sayHi.invoke()"> link </a>

But this time around, my function A() fails since although i have
handler to sayHi.invoke(), it has to be executed in correct context.
Other wise "this.text" is giving me error because when i say
oldHandler.call(this), i am executing the sayHi.invoke() with the html
element being passed as this.

Is there any way to get the pointer to the object 'sayHi' from
'sayHi.invoke()' as i think that will help me ? Or could any of you
have any better suggestion on this matter . I cannot all the web
developers in world to use the variable "me" so that my code works.

Thanks for Reading
Kiran.

 

[pr]

Hi,
I am writing a javascript code that parses dom and finds event
handlers attached to mouseover events. Then i will replace the
existing handler say B() with my own function say A(). When the event
happen and control comes to my function A(), after doing required
processing i will call B() as shown below

This will give you no end of trouble. Far better to intercept mouseovers
at the document level, using, for example

document.addEventListener("mouseover", mo, true);

and, after processing, decide which ones to let proceed to their
original destination and which (if any) to halt with stopPropagation().
See http://www.w3.org/TR/DOM-Level-2-Events.

[...]

function Alerter(text)
{
this.text=text;
var me=this;
this.invoke=function ()
{
alert(this.text);
}
}

If you want this to work, it should be:

alert(me.text);

See http://www.jibbering.com/faq/faq_notes/closures.html

 

[wolverine]

Hi,
I am writing a javascript code that parses dom and finds event
handlers attached to mouseover events. Then i will replace the
existing handler say B() with my own function say A(). When the event
happen and control comes to my function A(), after doing required
processing i will call B() as shown below

This will give you no end of trouble. Far better to intercept mouseovers
at the document level, using, for example

document.addEventListener("mouseover", mo, true);

and, after processing, decide which ones to let proceed to their
original destination and which (if any) to halt with stopPropagation().
Seehttp://www.w3.org/TR/DOM-Level-2-Events.

[...]

function Alerter(text)
{
this.text=text;
var me=this;
this.invoke=function ()
{
alert(this.text);
}
}

If you want this to work, it should be:

alert(me.text);

Perhaps you didn't read/understood my question completely. The web
page can be developed by any one. I have no control over who/how it is
developed. I have already told this at the end of my question.

I am looking for a solution which could work even if the web developer
uses alert(this.text);

 

[pr]

Perhaps you didn't read/understood my question completely. The web
page can be developed by any one. I have no control over who/how it is
developed. I have already told this at the end of my question.

I am looking for a solution which could work even if the web developer
uses alert(this.text);

Maybe you have to explain it again. If it's not sufficient to call your
own event handler before (optionally) calling the original event handler
then what?

 

[wolverine]

Maybe you have to explain it again. If it's not sufficient to call your
own event handler before (optionally) calling the original event handler
then what?

Let me make things clear. My second post was only to the guy named
"pr" and not to "intrader". This is since "pr" asked me to use
"me.text" instead of "this.text". I think "intrader" has got the
question correct and he has suggested a solution. Thanks for that.

But my problem is i am using IE and not Mozilla. So i think i cannot
really have my handler executing before the actual handler. Or is
there any way in IE to get my handler executing before the actual
handler (of course with out actually using "=" to replace the old
handler with mine)?

My preferred solution would be some thing like i have suggested in my
first post (question itself). I mean a way of getting a pointer to
"sayHi" from handler to "sayHi.invoke()". But let it be clear that i
would be more than happy with any solution.

 

[pr]

wolverine wrote:
[...]

But my problem is i am using IE and not Mozilla. So i think i cannot
really have my handler executing before the actual handler. Or is
there any way in IE to get my handler executing before the actual
handler (of course with out actually using "=" to replace the old
handler with mine)?

As far as I recall, setCapture() will do that in IE.

My preferred solution would be some thing like i have suggested in my
first post (question itself). I mean a way of getting a pointer to
"sayHi" from handler to "sayHi.invoke()". But let it be clear that i
would be more than happy with any solution.

I think the following (scruffy) example may suit.

By default it has alert('hello world') as a link's mouseover event. In
the body onload function, I get this code (in fact a Function object)
and pass it as a parameter to a new Handler object. Then I point the
link's onmouseover to the new Handler's mo function.

The new Handler retains the initial function in this.originalHandler,
aka self.originalHandler. When the Handler receives the event, having
first done something - in this case alert("my stuff") - it invokes the
original handler with self.originalHandler.call().

In IE, Opera and Firefox you get "my stuff" before "hello world".


<html>
<head><title></title>
<script type="text/javascript">
function Handler(originalHandler) {
var self = this;
this.originalHandler = originalHandler;

this.mo = function(e) {
alert("my stuff");
self.originalHandler.call();
}
}

var handler;

function init(){
var linkElement = document.getElementById("x");

handler = new Handler(linkElement.onmouseover);
linkElement.onmouseover = handler.mo;
}
</script>
</head>
<body onload="init()"><p>
<a id="x" href="http://www.mozilla.org/"
onmouseover="alert('hello world')">link</a>
</p></body>
</html>