Tuesday, June 19th, 2007
Object.Event: Event model for all JS Objects
Category: JavaScript
, Prototype
Ryan Johnson has created an event model for all Objects that mimics Event.observe from Prototype (A little like the events in Dojo):
Object.Event allows you to create and control events on any JavaScript object. This does this by providing an observer/observable implementation nearly identical to the one implemented in Prototype’s Element.observe(), except that it is not specific to DOM events or Element objects.
3.9 rating from 44 votes
Cool! Good to see other libraries start to encourage event-driven development outside of interactions with the DOM itself.
Plug for my own: a while ago, I posted about object-based event listening by extending a dispatcher class. I just gave the library an overhaul, making the objects available so that classes simply need to extend
Frozen.Event.Dispatcherand then define the supported events of the object. I based mine on the DOM’s event model, but whichever way works for you.This is a great addition. Thanks Ryan!
Looks really handy. I’m going to keep this is mind :)
I like the look of this, but I wonder if the ‘watch’ keyword isn’t a simpler way of achieving the same effect?
watch is great, but mozilla only the last time I checked. Have others caught up?
Hi Ryan! Well, your post answer’s my question. I wonder if you could make an alternate syntax for your library that mimics the watch syntax. A lot of Prototype functions have alternate names….
MooTools has something similar. Really, really similar.
No I don’t believe moo does. $(myElement).addEvent() and $().fireEvent() are tied to the DOM element and not any Object.
Yes, it does.
MooTools has Class Events: http://docs.mootools.net/Class/Class-Extras.js#Events
I stand corrected. 8)
in moo you can even have ANY object to be an Event-driven object, not only classes have that ability.
it’s as simple as this:
$extend(myDummyObject, new Events)
i’m already developing lots of stuff based on this approach.
The Mootools Event class is indeed pretty similar. I think the class & instance observation differentiates it a little bit, but it’s pretty similar overall. I hadn’t seen that before today despite having used mootools on a few smaller projects.
Ryan also wrote that nice little editor widget featured here a month or two ago… Control.Textarea. I’ve been lusting after this since I saw it mentioned and have even recently (last 4 days) started deploying markdown so that I can consider using Control.textarea. We need more simple solutions like the stuff you’ve done Ryan, good work!
How is this a resemblance of Dojo? Dojo’s event system is based on AOP. The event model mentioned in this article looks just like the traditional observer-dispatcher pattern.
@ gonchuki - I think Ryans approach works on both classes and objects.
@ithink:
let me remember you that i said *any* object.
a Class is an object, and as such you can $extend it with whatever you want, that includes Events.
what may confuse you is that in moo a Class already has an ‘implement’ method as described in Valerio’s link to the docs, nevertheless the $extend approach is still applicable in this case.
http://pastie.caboo.se/72065
test it, enjoy it :)
Maybe this could clear it up a little bit. Object.Event can register observers in three ways:
1) to “static” objects (in Java or PHP you’d be naming the members all static because you’re never going to create an instance of the class)
2) to instance objects (anything that was created by calling new Whatever())
3) to all instances of a class (all instances created by new Whatever())
That was far from the most elegant explanation, but does that clear up confusion for folks?
@gonchuki - Ryan Johnson’s code can do the same thing on regular objects via Object.Event.extend(myStaticObject);
@Ryan et al
I know what this code does, we (mootools users) were just saying this has already been part of moo for a long time and has the same functionality
(yes Ryan, just apply $extend to ‘myClass’ instead of ‘testClass’ from my pastie and that covers your second point of applying the Events to just one instance.)
Just to keep things clear, this is no bashing @ Ryan, it’s just telling this is not breaking news neither you should necessarily depend on this code to apply events on any object of your code. (except that it’s a nice tiny piece of js)
But this one goes to 11…
Its news to Prototype users. Keep up the great work Ryan.
(to the Moo experts) how does the Moo observer implementation compare to the YUI observer implementation?
Nice work dude.