Events basics

menu.contacts.click = function() { contentArea.update("contacts data"); bannersArea.update("latest articles data"); }

menu.contacts.dispatch("the contacts button is clicked"); ... ... ... contentArea.addEventListener("the contacts button is clicked", function() { // update code here }); bannersArea.addEventListener("the contacts button is clicked", function() { // update code here });

Managing events (the EventBus class)

Simple dispatch/listen

function myFunction(event) { alert("myFunction type=" + event.type); } EventBus.addEventListener("my_function_event", myFunction); EventBus.dispatch("my_function_event");

Passing the dispatcher

var TestClass1 = function() { this.className = "TestClass1"; this.callback = function(event) { alert(this.className + " = type:" + event.type + " / dispatcher:" + event.target.className); } }; var TestClass2 = function() { this.className = "TestClass2"; this.dispatchOurEvent = function() { EventBus.dispatch("callback_event", this); } }; var t1 = new TestClass1(); var t2 = new TestClass2(); EventBus.addEventListener("callback_event", t1.callback, t1); t2.dispatchOurEvent();

function addEventListener(type, callback, scope) { ... }

function dispatch(type, target) { ... }

TestClass1 = type:callback_event / dispatcher:TestClass2

Passing custom parameters to the listeners function

var TestClass1 = function() { this.className = "TestClass1"; this.doSomething = function(event, param1, param2) { alert(this.className + ".doSomething"); alert("type=" + event.type); alert("params=" + param1 + param2); alert("coming from=" + event.target.className); } }; var TestClass2 = function() { this.className = "TestClass2"; this.ready = function() { EventBus.dispatch("custom_event", this, "javascript events", " are really useful"); } }; var t1 = new TestClass1(); var t2 = new TestClass2(); EventBus.addEventListener("custom_event", t1.doSomething, t1); t2.ready();

EventBus.dispatch("custom_event", this, "javascript events", " are really useful");

The events are used in the communication between modules of the application. Let's imagine that we have a basic web blog page like this one: [2] And let's say that if you click onwe will update the content's area and we will replace the banners' area with our latest articles. Normaly we can use something like:That's fine and probably will work for us, but what if you want to add something else. We will have to add additional functions to the code above. Now imagine that we are using classes and we have a complex hierarchy of objects. It is not so easy to have access to these objects in every function. Something, also very important, is that we can't transfer these classes to some other project, because they are tightly connected to each other. By using events you are solving all this problems. The idea is that we have dispatchers (classes thatevents) and listeners (classes thatfor events). [1] So, in the situation above our menu object dispatches an event. The content's area and the banners' area are waiting for this event and they will update themselfs when they catch this event. In other words:As you can see, our objects are completely independent. The menu object doesn't care what will happen when the contacts button is clicked. It just informs the other modules for that and that is its job. Also we can easily transfer the menu class to some other project. The only one thing that we have to know is what events will be dispatched.Unfortunately JavaScript doesn't have native methods likeand. We have to create them manually. Inspired by RobotLegs (AS3 micro-architecture) I created a class called. It has the following methods: a) addEventListener - adding a listener b) removeEventListener - removing a listener c) dispatch - dispatching event d) getEvents - for debugging purpose, it just print out the added listeners The class is available for download here We are addingmethod as a listener for theand after that simply dispatching the event.As you can see we have two classes - TestClass1 and TestClass2. Every one of them has a property called(if you have troubles understanding the classes in javascript please check this article ). Of course the property is different for the two classes. What we did above is to add a listener for the eventand then dispatch it. When we use classes it is good to add the scope of our listener function. In our case the function isand the scope is. The actual version of the addEventListener function is:and for the dispatch method:If we don't pass the scope we will not have an access toproperty. If you test the example above will see that the result is:Something else that is very important to know is that every listener's function receives an object, which has two properties: a) type - the name of the dispatched event b) target - the dispatcher (if is passed)It is possible to pass as many parameters as you want when you are dispatching an event:As you can see I passed two stringsand. The only thing that you should considered is that your parameters are coming after theobject in the listener's function. Get the source code and the example from GitHub