Custom events with MooTools
Custom events with MooTools are easy to implement with Element.fireEvent and Class.fireEvent. They work on a known instance of something, like for example $("my-div").fireEvent("click"); will make a div with an id of my-div register a click, and it will need a click event listener to handle the response. Or another example, a custom class we’ve created can do something like this.fireEvent(":my custom event");. We receive the event by establishing an event listener in the regular way this.addEvent(":my custom event", function (ev) {alart("yeah");});.
But what if we don’t know the instance that we want to handle the custom event? For example, what if we have just saved an item in a class of ours, and we want to update the global state of the application to reflect the save. There could be several components that want to know about the save. A simple, flexible solution is to use the global document object to send and receive the custom events. From any object we can trigger an event in the document and from any other object we can receive and establish a handler for that custom event.
Check out an example on MooShell
0 comments