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!