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
    LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

  • By
    I’m an Impostor

    This is the hardest thing I've ever had to write, much less admit to myself.  I've written resignation letters from jobs I've loved, I've ended relationships, I've failed at a host of tasks, and let myself down in my life.  All of those feelings were very...

Incredible Demos

  • By
    MooTools Kwicks Plugin

    I wrote a post titled Get Slick with MooTools Kwicks ages ago. The post was quite popular and the effect has been used often. Looking back now, the original code doesn't look as clean as it could. I've revised the original...

  • By
    CSS Counters

    Counters.  They were a staple of the Geocities / early web scene that many of us "older" developers grew up with;  a feature then, the butt of web jokes now.  CSS has implemented its own type of counter, one more sane and straight-forward than the ole...


  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!