Attaching Events To Classes In MooTools?

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.

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.

Thank you for your reply but I seem to get an error message from FireBug saying that "addEvent is not a function". – Tom Smith Apr 3 at 17:02 Did you do addEvents – Dave Apr 3 at 19:09 1 That means your element was not found. In that case $() returns null.

Make sure this.newDiv. Id is in your DOM. You could also use $(this.

NewDiv) since $() also accepts element instances. You could even do this.newDiv. AddEvent(...) however that will not work on IE, hence $ should be used.

– arian Apr 3 at 21:04.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.