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,
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,
load: 2, unload: 1, beforeunload: 2, resize: 1,
move: 1, DOMContentLoaded: 1, readystatechange: 1,
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 [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”]
my_event : function()
return this.set(‘text’,’Edited’);

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

Call Custom Event with MooTools

[cc lang=”javascript”]
// Using ID

// Using CSS selector

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(){
show_hide : function() {
if(this.getStyle(‘display’) == ‘block’)

return this;

// We are calling this event periodically so you
// can see the toogling state of the element


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

  • […] the element. You can bind multiple events to single element also.In older post I have explain about Creating a Custom Events with MooTools.Basic Styling of ElementBasic styling includes the adding/removing the CSS property to element and […]

  • […] your custom events also. If you are not sure how to achieve this then you can refer to this article for the same.Upto now I have explained about assigning an events. When you assign event then it […]


Leave a Reply

Your email address will not be published. Required fields are marked *