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.

[cc lang=”javascript”]
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
};
[/cc]

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 [code]Element.implement[/code] 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

[cc lang=”javascript”]
Element.implement({
my_event : function()
{
return this.set(‘text’,’Edited’);
}
});
[/cc]

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

Call Custom Event with MooTools

[cc lang=”javascript”]
// Using ID
document.id(‘my_id’).my_event();

// Using CSS selector
$$(‘.my_class’).my_event();
[/cc]

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.

[cc lang=”javascript”]
window.addEvent(‘domready’, function(){
Element.implement({
show_hide : function() {
if(this.getStyle(‘display’) == ‘block’)
this.setStyle(‘display’,’none’);
else
this.setStyle(‘display’,’block’);

return this;
}
});

// We are calling this event periodically so you
// can see the toogling state of the element
(function(){$(‘show_hide’).show_hide()}).periodical(1000);

});
[/cc]

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