Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

Prototype’s Element.on with MooTools

By  on  

Prototype 1.7RC1 was released on Monday. While the big news with this release appears to be the implementation of John Resig's Sizzle selector engine, what caught my eye was the new on method. This new Element.on method is very similar to Prototype's Element.observe method but with a few enhancements (event relaying, event stop). While I don't necessarily care about the enhancements, I simply love that the event method is called "on." Using "on" as the method name makes it sound more like the event itself. Here's how easy it is to use "on" instead of "addEvent" for your events.

The MooTools JavaScript

/* the directive */
Element.alias('addEvent','on');

/* the usage */
$('myElement').on('click',fn);

Using on instead of addEvent is as easy as a quick MooTools Element.alias directive.

It's weird that I like "on" so much considering a generally don't like jQuery's css and attr methods. Oh well. Congrats to the Prototype team for their impending release.

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    5 Awesome New Mozilla Technologies You’ve Never Heard Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

  • By
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

Incredible Demos

  • By
    background-size Matters

    It's something that makes all men live in fear, and are often uncertain of. It's never spoken, but the curiosity is always there. Nine out of ten women agree in the affirmative. Advertisers do their best to make us feel inadequate but...

  • By
    jQuery Wookmark

    The first thing that hits you when you visit Pinterest is "Whoa, the columns are the same width and the photos are cut to fit just the way they should."  Basic web users probably think nothing of it but as a developer, I can appreciate the...

Discussion

  1. Lorenzo S.

    Hi David. Nice idea. I like also css() and other jQuery methods’ name (for their simplicity), but I prefer Mootools core. So, why not:

    Element.alias('addEvent','on'); 
Element.implement({
  'css': function(p, v) {
    if (v == undefined) return this.getStyle(p);
    else return this.setStyle(p, v);
  },
  'attr': function(a, v) {
    if (v == undefined) return this.getProperty(a);
    else return this.setProperty(a, v);
  },
  'html': function(h) {
    if (h == undefined) return this.get('html');
    else return this.set('html', h);
});

    What do you think?

  2. David Walsh

    @Lorenzo S.: I’ve done posts like that in the past. I can’t stand .css and .attr for MooTools, but what you have would work.

  3. Arian

    @Lorenzo S.: If you want jQuery syntax in MooTools, have a look at this repository: http://github.com/cheeaun/mooj/blob/master/mooj.js

  4. Nikolaj

    @David

    Fully agree with “on” seems acceptable, whereas .css, .attr etc. doesn’t :)

    I guess the reason you might like “on” – when not other jQuery shortcuts – might be due to we’re used to “on” in “onClick” etc. for regular JavaScript, which probably makes the mind having positive thoughts.

  5. Richard

    Great advice, thanks a lot.

    However, how much slower will this be? I mean, will on() trigger addEvent() and that in turn will trigger whatever internal functions are used?

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