Implement Custom Events for Element using MooTools

By Avinash

August 25, 2011Tutorial2 Comments

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.

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); });
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);

});

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

Share This Article