Prototype’s Element.on with MooTools
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.
![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...
![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...
![Fading Links Using jQuery: dwFadingLinks]()
UPDATE: The jQuery website was down today which caused some issues with my example. I've made everything local and now the example works.
Earlier this week, I posted a MooTools script that faded links to and from a color during the mouseover and mouseout events.
![Duplicate the jQuery Homepage Tooltips Using MooTools]()
The jQuery homepage has a pretty suave tooltip-like effect as seen below:
Here's how to accomplish this same effect using MooTools.
The XHTML
The above XHTML was taken directly from the jQuery homepage -- no changes.
The CSS
The above CSS has been slightly modified to match the CSS rules already...
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?
@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.
@Lorenzo S.: If you want jQuery syntax in MooTools, have a look at this repository: http://github.com/cheeaun/mooj/blob/master/mooj.js
@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.
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?