Implement Custom Events for Element using MooTools

As we all know MooTools is the very well known javascript framework in now a days. All Javascript framework provides the scope to bind the attach the events to HTML elements. Some default events are click, mouseover, focus, etc.

Mootools has a number of Native events which we can bind with any elements. Here is the list of that.

Element.NativeEvents = { //mouse buttons click: 2, dblclick: 2, mouseup: 2, mousedown: 2, contextmenu: 2, //mouse wheel mousewheel: 2, DOMMouseScroll: 2, //mouse movement mouseover: 2, mouseout: 2, mousemove: 2, selectstart: 2, selectend: 2, //keyboard keydown: 2, keypress: 2, keyup: 2, // mobile orientationchange: 2, // touch touchstart: 2, touchmove: 2, touchend: 2, touchcancel: 2, // gesture gesturestart: 2, gesturechange: 2, gestureend: 2, //form elements focus: 2, blur: 2, change: 2, reset: 2, select: 2, submit: 2, //window load: 2, unload: 1, beforeunload: 2, resize: 1, move: 1, DOMContentLoaded: 1, readystatechange: 1, //misc error: 1, abort: 1, scroll: 1 };

Element.NativeEvents = {
//mouse buttons
click: 2, dblclick: 2, mouseup: 2, mousedown: 2, contextmenu: 2,
//mouse wheel
mousewheel: 2, DOMMouseScroll: 2,
//mouse movement
mouseover: 2, mouseout: 2, mousemove: 2, selectstart: 2, selectend: 2,
//keyboard
keydown: 2, keypress: 2, keyup: 2,
// mobile
orientationchange: 2,
// touch
touchstart: 2, touchmove: 2, touchend: 2, touchcancel: 2,
// gesture
gesturestart: 2, gesturechange: 2, gestureend: 2,
//form elements
focus: 2, blur: 2, change: 2, reset: 2, select: 2, submit: 2,
//window
load: 2, unload: 1, beforeunload: 2, resize: 1,
move: 1, DOMContentLoaded: 1, readystatechange: 1,
//misc
error: 1, abort: 1, scroll: 1
};

But what if you want to create you own events to any element. Yes MooTools has given the scope for that also. We can use Element.implement to create any user defined events to the element.

Let’s see how we can create a events to the element with MooTools.

Create Custom Event with MooTools

Element.implement({ my_event : function() { return this.set('text','Edited'); } });

Element.implement({
my_event : function()
{
return this.set('text','Edited');
}
});

Above event will set the innerHTML of the element with “Edited”.

Call Custom Event with MooTools

// Using ID document.id('my_id').my_event(); // Using CSS selector $$('.my_class').my_event();

// Using ID
document.id('my_id').my_event();

// Using CSS selector
$$('.my_class').my_event();

Simple Element Event to Toogle the display Property

This event will check for the display property of the element. If its set to ‘display’ then it will set it to ‘none’ and vice versa.

Now let’s have a look at the code for that.

Note: We can perform the chaining if we are returning the Object from the function.

EXPERT

Recent Posts

Upcoming Articles