Adding custom code to mootools addEvent

Question

Even though I've been using mootools for a while now, I haven't really gotten into playing with the natives yet. Currently I'm trying to extend events by adding a custom addEvent method beside the original. I did that using the following code(copied from mootools core)

Native.implement([Element, Window, Document], {
    addMyEvent:function(){/* code here */}
}

Now the problem is that I can't seem to figure out, how to properly overwrite the existing fireEvent method in a way that I can still call the orignal method after executing my own logic.

I could probably get the desired results with some ugly hacks but I'd prefer learning the elegant way :)

---

Update: Tried a couple of ugly hacks. None of them worked. Either I don't understand closures or I'm tweaking the wrong place. I tried saving Element.fireEvent to a temporary variable(with and without using closures), which I would then call from the overwritten fireEvent function(overwritten using Native.implement - the same as above). The result is an endless loop with fireEvent calling itself over and over again.

Update 2: I followed the execution using firebug and it lead me to Native.genericize, which seems to act as a kind of proxy for the methods of native classes. So instead of referencing the actual fireEvent method, I referenced the proxy and that caused the infinite loop. Google didn't find any useful documentation about this and I'm a little wary about poking around under the hood when I don't completely understand how it works, so any help is much appreciated.

---

Update 3 - Original problem solved: As I replied to Dimitar's comment below, I managed to solve the original problem by myself. I was trying to make a method for adding events that destroy themselves after a certain amount of executions. Although the original problem is solved, my question about extending natives remain.

Here's the finished code:

Native.implement([Element, Window, Document], {
addVolatileEvent:function(type,fn,counter,internal){
    if(!counter)
        counter=1;
    var volatileFn=function(){
        fn.run(arguments);
        counter-=1;
        if(counter<1)
        {
            this.removeEvent(type,volatileFn);
        }
    }
    this.addEvent(type,volatileFn,internal);
}
});

is the name right? That's the best I could come up with my limited vocabulary.

Answer 1

document.id("clicker").addEvents({
    "boobies": function() {
        console.info("nipple police");
        this.store("boobies", (this.retrieve("boobies")) ? this.retrieve("boobies") + 1 : 1);
        if (this.retrieve("boobies") == 5)
            this.removeEvents("boobies");
    },
    "click": function() {
        // original function can callback boobies "even"
        this.fireEvent("boobies");
        // do usual stuff.
    }
});

adding a simple event handler that counts the number of iterations it has gone through and then self-destroys.

think of events as simple callbacks under a particular key, some of which are bound to particular events that get fired up.

using element storage is always advisable if possible - it allows you to share data on the same element between different scopes w/o complex punctures or global variables.

Natives should not be modded like so, just do:

Element.implement({
    newMethod: function() {
        // this being the element
        return this;
    }
});

document.id("clicker").newMethod();

unless, of course, you need to define something that applies to window or document as well.