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

By  on  

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.


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

    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!

Recent Features

  • By
    Regular Expressions for the Rest of Us

    Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...

  • By
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

Incredible Demos


  1. Arian

    Note that Events.Pseudos is almost the same, but for Class Events!

  2. Arian

    @arieh: that is the whole string: event:pseudo(value)

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!