How to do a non-destructive overwrite of a function in javascript
I really don’t like the “non-destructive” expression but I couldn’t come up with a better one.
What?
You want to create a function but you will overwrite the old one. You just want to add some code before or after it.
Example, you create a javascript applet that can be added to web sites you do not own and you want to call a function in the body.onclick() event. Maybe the site already has something in the body.onclick() event and you don’t want to overwrite it because the other developer will be mad at you. You’re stuck!
How?
First of all, don’t panic. Take a deep breath and relax.
Now, you’re ready.
-
var oldBodyOnClick = body.onclick;
-
body.onclick = function() {
-
// Add your code here!
-
alert("Before the old event");
-
-
if (oldBodyOnClick != null) {
-
oldBodyOnClick();
-
}
-
-
// or here!
-
alert("After the old event");
-
}
Could you repeat slower please?
Ok.
First, I assign the body.onclick() event to a new variable.
-
var oldBodyOnClick = body.onclick;
Second, I create a new function that will be called on the body.onclick() event.
-
body.onclick = function() {
Third, I add code before the old event
-
alert("Before the old event");
Fourth, I call the old event if it is not null
-
if (oldBodyOnClick != null) {
-
oldBodyOnClick();
-
}
Third, I add code after the old event
-
alert("After the old event");
That’s it!
Here come the recuer again!
Here Comes: THE CLOSURE!
function FnBuilder(){
var Old=document.getElementById(”myb”).onclick
function New(){Old();alert(5678);}
return New
}
document.getElementById(’myb’).onclick=FnBuilder();
FnBuilder=null;
Nice. Don’t most js libraries take care of this automatically already? Oh, and by the way (nitpick coming), the past tense of “stick” is “stuck” and not “stucked”
@Boyan
I guess that a lot of librairies can take care of this… but sometimes you don’t have any librairie for a small web site or a bookmarklet…
Thanks for the correction…
While I don’t like that method of event adding (I think a nice cross-browser addEvent function is far safer / nicer), it’s quite a pretty way of doing it - one good consequence is that you can specify whether yours happens before or after all of the existing methods.
Another similar “trick” which I like is overriding the alert() function to get rid of potentially missed debug code, like so:
_alert = alert;
alert = null;
Since you’re not really overwriting the function, but adding before and after callbacks, ActsAsAspect is an elegant way of doing this - http://beppu.lbox.org/articles/2006/09/06/actsasaspect
Basically, you can take a function or object or class with some existing methods:
MyObj.go = function() { alert(’go’); }
and call actsAsAspect() on it like so:
actsAsAspect(MyObj);
then it gets some some extra methods - before, after, & around, which let you add listeners to that function like this:
MyObj.before(’go’, function() { alert(’do this before go() gets called!’) })
It’s short and sweet, I love that little script.
Even without a library, try DOM Level 2 assignment and you won’t overwrite any of these DOM 1 assignments or other DOM 2 events.
What do you mean by DOM Level 2?
Are you talking about the register event stuff?
Couldn’t get this to work with “console.debug” (which comes with Firebug, for Firefox) — I got “too many recursions” with
var origcd = console.debug
console.debug = function(s) {
origcd(’console-debug: ‘ + s)
}
:
:
:
console.debug(’test’)
console.debug writes to a console, that can be viewed with Firebug.
Stephan