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.

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!

Recent Features

  • By
    How to Create a Twitter Card

    One of my favorite social APIs was the Open Graph API adopted by Facebook.  Adding just a few META tags to each page allowed links to my article to be styled and presented the way I wanted them to, giving me a bit of control...

  • By
    Welcome to My New Office

    My first professional web development was at a small print shop where I sat in a windowless cubical all day. I suffered that boxed in environment for almost five years before I was able to find a remote job where I worked from home. The first...

Incredible Demos

  • By
    “Top” Watermark Using MooTools

    Whenever you have a long page worth of content, you generally want to add a "top" anchor link at the bottom of the page so that your user doesn't have to scroll forever to get to the top. The only problem with this method is...

  • By
    9 Mind-Blowing WebGL Demos

    As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us.  Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos.  Another technology available...

Discussion

  1. Arian

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

    http://mootools.net/docs/more/Class/Events.Pseudos

  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!