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.
![5 HTML5 APIs You Didn’t Know Existed]()
When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It." Can you blame us though? We watched the fundamental APIs stagnate for so long that a basic feature...
![Write Simple, Elegant and Maintainable Media Queries with Sass]()
I spent a few months experimenting with different approaches for writing simple, elegant and maintainable media queries with Sass. Each solution had something that I really liked, but I couldn't find one that covered everything I needed to do, so I ventured into creating my...
![New MooTools Plugin: ElementFilter]()
My new MooTools plugin, ElementFilter, provides a great way for you to allow users to search through the text of any mix of elements. Simply provide a text input box and ElementFilter does the rest of the work.
The XHTML
I've used a list for this example...
![Animated AJAX Record Deletion Using MooTools]()
I'm a huge fan of WordPress' method of individual article deletion. You click the delete link, the menu item animates red, and the item disappears. Here's how to achieve that functionality with MooTools JavaScript.
The PHP - Content & Header
The following snippet goes at the...
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?