Super-Powered Pseudos with MooTools’ Element.Event.Pseudo

The MooTools Team and its contributors are always looking for more efficient, creative ways to accomplish common tasks.  Not only is accomplishing the task with an efficient amount of code good enough, but doing so while keeping the code legible and functionality reliable.  I'm confident that we've found such a blend of functionality and code efficiency with MooTools More's Element.Event.Pseudo.  Element.Event.Pseudo meshes event assignment and functionality to provide a quick way to trigger functionality from special pseudo-style events.

MooTools Element.Event.Pseudos

It all starts with a pseudo-style syntax within the addEvent method, much the way that MooTools' event delegation works:

domElement.addEvent('eventType:pseudoName', function(){
    //triggered method
});

The first portion of the string is the event.  The second portion of the event string is the pseudo-functionality to execute when the event is triggered.  Lastly, the function provided executes when the pseudo is matched.

Element.Event.Pseudos:  The :once Pseudo Event

One of the special event pseudos that comes bundled with Element.Event.Pseudo is :once.  The :once pseudo event allows a functionality to occur once per element;  once the event has been triggered for a given element, it may not be triggered on that element again:

domElement.addEvent('click:once', function(){
    console.log('I was clicked for the very first time!');
});

The above element may be clicked once;  after the first click, the console statement will not run again.  The code that accomplishes this one-time-only task is as follows:

Event.definePseudo('once', function(split, fn, args){
    fn.apply(this, args);
    this.removeEvent(split.original, fn);
});

Element.Event.Pseudos:  Defining Custom Pseudo Events

You can create your own pseudo events with Event.definePseudo.  This method's signature and arguments are as follows:

Event.definePseudo(name, fn(splitObj,fn,args) {
	
});

The first argument is the pseudo name, the second is a function with three arguments:

• An object with the following properties:
  • event: the type of event to listen to
  • value: the value within the option "()" piece of the pseudo
  • pseudo: the name of the pseudo
• The function to be run
• Arguments to be provided to second argument

The structure is quite simple and lends itself well to legible code.

Element.Event.Pseudos.Keys

As if basic pseudo events were enough, Element.Event.Pseudo.Keys allows you to couple keys with your event:

domElement.addEvent('keydown:keys(alt+1+a)',function(){
    console.log('Keys pressed: alt, 1 and a');
});

The following keys are supported:  enter, up, down, left, right, esc, space, backspace, tab, delete, shift, control, alt, capslock, pageup, pagedown, end, home, numlock, scrolllock, ;, =, ,, -, ., /, `, [, \, ], ', +.  Obviously basic letters and numbers are also supported.

Super-Powered Pseudos!

Pretty cool, huh?  The code is compact but also still very readable and maintainable!  Let me know if you have any ideas for pseudo events or, even better, a few code snippets you'd like to share.  They make it into MooTools More!