Mootools using Events in Class

Following is a simple tutorial on how to use events in a mootools class. Mootools class provide a method to use events in your class. You can simply do that by using the "Implements: Events" in your class declaration. Hence, for new class it should be like following;

var myClass = new Class ({

              Implements: Events,

              initialize: function(elements){

                         //your code

              }

});

and if you want to add the support for events in an existing class, you can use the following syntax;

myClass.implement(Events);

Now, once we have added the support for the events in the class, it's time to see how to add and fire event from a class. Let's assume there is a div with id "el" and there are multiple divs inside this particular div. At the time being, we just want to hook an event on this div "el" and we want the function to fire when mouse is clicked inside the div.

var clicked = function(){

         alert("here");

}

var myClass = new Class ({

              Implements: Events,

              initialize: function(elements){

                         //your code

                         $('el').addEvent('click', this.click.bind(this));

              },

              click: function(){

                       this.fireEvent('click');

              }

});

window.addEvent('domready', function(){
    var obj = new myClass();
    obj.addEvent('click', clicked);
});
the function fireEvent fires all events of the specified type in the Class instance, in our case, it will fire all the events hooked on click. When you run the above code, you'll see that whenever you click inside the "el" div, the function is clicked is called.
Now, let's say we want to change this a bit. We want to get the id of the inner div on which the mouse is clicked. Now, remember we have event delegation, so we don't need to go through each and every element to hook that event. Consider the following code;


var clicked = function(myObj){
     alert("You clicked on div with id = "+myObj.id);
    }
    
    var myClass = new Class ({
          Implements: Events,
          initialize: function(elements){
                     //your code
                     $('el').addEvent('click:relay(div)', this.click.bind(this));
          },
    
          click: function(ev, divObj){
                   this.fireEvent('click', divObj);
          }

});

window.addEvent('domready', function(){
    var obj = new myClass();
    obj.addEvent('click', clicked);
});
Now, in above method, we have passed parameter divObj (the object of the div on which mouse is clicked) through fireEvent. if you want to pass more than one parameters to a function through fireEvent, you'll have to use array i.e. this.fireEvent('click', [arg1, arg2]);. When the above code is executed, it displays the id of the div on which mouse was clicked. See the above script in action on the following url;

 http://jsfiddle.net/vCYmk/1/