Attaching Events To Classes In MooTools?

I am fairly new to MooTools and I'm just a little confused about how to use it and would like a few pointers.

For example, in my app, when an object of one of my classes is initialized, it creates a div element. This div is then placed into another div. The user may create multiple instances of the class. I would now like to know how to add events to this object so that it may react after being clicked, double-clicked and so-on. Below is the class I have created:

var new_Div = new Class({
    initialize: function(name)
    {
        this.newDiv = name + "_div";
        this.newDiv = document.createElement('div');
        this.newDiv.id开发者_运维技巧 = this.classDiv;
        this.newDiv.style.width = "200px";
        this.newDiv.style.height = "160px";
        this.newDiv.style.border = "thin red dashed";
        document.body.appendChild(this.newDiv);
    }
});

Divs are created and named by the user by taking there input from a textbox for the divs id. The generate div is then inserted into the body using this code which calls the initialize() function and creates a div:

var divName= document.getElementById("newdiv_Input").value;
window[divName+ '_var'] = new new_Div(divName);

This then allows for the same type of object to be created with different names.

Now the thing I am confused about is how to attach events to the class. For example, how would I create an event that allows each div to be left clicked and have a function run, this issue of attaching events to the class has really confused me. Could anyone help me out?

---

it really depends on what you mean by Events to Classes. You either mean, have the class fire up events to the instance (via the Events mixin) or have the Element fire events to the class / attach Events to dom nodes by Class. With that in mind, here's an example that does both: sets a generic event handler via DOM within the class and also has the class notify the instance of the click so you can override the functionality from your instance instantiation.

in relation to your post in the other thread:

var new_Div = new Class({

    // use Options and Events mixins 
    Implements: [Options, Events],

    // define defaults that you can override 
    options: {
        parentNode: document.body, // can point to your input
        injectPosition: "top", // bottom, after (to show after input), before
        width: 200,
        height: 160,
        border: "1px dashed red",
        html: ""
    },

    initialize: function(name, options) {

        // set defaults
        this.setOptions(options);

        // where to inject?
        this.parent = document.id(this.options.parentNode);
        if(!this.parent)
            return; // does not exist - domready?

        // create the element
        this.element = new Element("div", {
            id: name + "_div",
            html: this.options.html,
            styles: {
                width: this.options.width,
                height: this.options.height,
                border: this.options.border
            },
            events: {
                click: this.handleClick.bind(this)
            }
        });

        // inject into dom at the parent node and position
        this.element.inject(this.parent, this.options.injectPosition);
    },

    handleClick: function(event) {
        // called when clicked on the div
        if (event && event.stop)
            event.stop();

        // you can do stuff here
        alert("hi from element event handler");

        // or delegate it to the instance like so:
        this.fireEvent("clicked", event || {});
    }
});

new new_Div("test", {
    html: "hello",
    onClicked: function() {
        // handle the custom "clicked" event on the instance
        alert("hi from class instance event");
    }
});

here it is working: http://jsfiddle.net/dimitar/cgDrG/

and finally, consider using toElement, which allows you to treat the class instance as a dom element and export the div you make directly - working example, useful for forms etc.

var new_Div = new Class({

    // use Options and Events mixins
    Implements: [Options, Events],

    // define defaults that you can override
    options: {
        width: 200,
        height: 160,
        border: "1px dashed red",
        html: ""
    },

    initialize: function(name, options) {

        // set defaults
        this.setOptions(options);

        // create the element
        this.element = new Element("div", {
            id: name + "_div",
            html: this.options.html,
            styles: {
                width: this.options.width,
                height: this.options.height,
                border: this.options.border
            },
            events: {
                click: this.handleClick.bind(this)
            }
        });
    },

    handleClick: function(event) {
        // called when clicked on the div
        if (event && event.stop) event.stop();

        // you can do stuff here
        alert("hi from element event handler");

        // or delegate it to the instance like so:
        this.fireEvent("clicked", event || {});
    },

    toElement: function() { 
        // the class will return this.element if called through $
        return this.element || null;
    }
});

var foo = new new_Div("test", {
    html: "hello",
    onClicked: function() {
        // handle the custom "clicked" event on the instance
        alert("hi from class instance event");
    }
});

// inject this.element through toElement into dom. 
$(foo).inject(document.id("your_name"), "after");

this is the correct syntax to use in mootools, your lines are not exactly good practices. Also, this is your second question in as many days. consider making your account permanent and accepting some answers.

here's a practical example with a mini validator class that checks for required fields and fires off an instance of the error box class if not satisfied: http://jsfiddle.net/dimitar/cgDrG/5/

---

Instead of giving a detailed explanation; I'll just add to your code and then let you naturally figure it out from there. You should feel free to mess with it and experiment.

var new_Div = new Class({
  initialize: function(name)
  {
      this.newDiv = name + "_div";
      this.newDiv = document.createElement('div');
      this.newDiv.id = this.classDiv;
      this.newDiv.style.width = "200px";
      this.newDiv.style.height = "160px";
      this.newDiv.style.border = "thin red dashed";
      document.body.appendChild(this.newDiv);

      // Using the element selector
      // Keep in mind you can only do this once the element has been
      // added to the document body and you can actually see it on the 
      // web page.
      $(this.newDiv.id).addEvents({
        click: function () {
          alert('Put whatever you want to do on click here...');
        }
      });
  }
});

"$()" is the element selector I was referring to. You should become familiar with this. Mootools has great documentation, so spend some time looking here on the Mootools element and here on mootools events.