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
    Send Text Messages with PHP

    Kids these days, I tell ya.  All they care about is the technology.  The video games.  The bottled water.  Oh, and the texting, always the texting.  Back in my day, all we had was...OK, I had all of these things too.  But I still don't get...

  • By
    Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...

Incredible Demos

  • By
    DWRequest: MooTools 1.2 AJAX Listener & Message Display

    Though MooTools 1.2 is in its second beta stage, its basic syntax and theory changes have been hashed out. The JavaScript library continues to improve and become more flexible. Fellow DZone Zone Leader Boyan Kostadinov wrote a very useful article detailing how you can add a...

  • By
    Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API...

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!