Consider the following example (which comes up a lot in my style of writing Moo):

  1. You create a new Class and use the Binds property to fix the scope of it’s methods to the Class instance.
  2. You have a DOM element with some data .stored, and a mouse event handler that is a method Bound to the Class mentioned above.
  3. You want to .retrieve some data from the DOM element when firing the Bound method.
  4. That element has children.

When the mouse event fires, “this” will be the Class instance (as desired and expected), and will be the element that first triggered the event, which will not necessarily the one that had the event handler added (via addEvent).

In most of the “modern” browsers and popular JS frameworks (including jQuery), as well as AS3, we have access to the element with the bound handler via the currentTarget property of the event object. However, when using the MooTools event management system, we lose this: (POC:

While there’s a one-line modification possible to the core to “recreate” currentTarget property (link), which is really just the addition of this line to the addEvent method signature:

But I’m always loathe to tweak the core of a framework (which can be confusing for other developers, and needs to be maintained across versions).

You could also override the Element.addEvent method with Element.implement (adding that same line), but again IMO this is unacceptable (for the same reasons mentioned above).

So – the proper way to address this issue is to simply write a function… While proper, it’s not exactly the most elegant, but so far this is the only acceptable fix I can think of. I’d love to hear any alternatives.